css怎樣把div修飾成圓

發(fā)布時間：2020-12-30 14:07:31 來源：億速云閱讀：499 作者：小新欄目：web開發(fā)

小編給大家分享一下css怎樣把div修飾成圓，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

css把div修飾成圓的方法：首先新建一個html文件；然后在body標簽內(nèi)輸入“<div class="circle"></div>”；最后在head表里添加style標簽，并添加“border-radius”屬性即可。

css把div修飾成圓

1、打開代碼編輯器，新建一個html文件，寫上基本的結(jié)構(gòu)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2、在body標簽內(nèi)輸入：<div class="circle"></div>，這里的div就是用于畫圓形的標簽。

<body>
    <div class="circle"></div>
</body>

3、在head表里添加style標簽，輸入下面代碼

<style>
    .circle{
        width: 200px;
        height: 200px;
        border-radius: 100px;
        background-color: #1EFD0C;
    }
</style>

5、保存好代碼，打開瀏覽器即可看見圓形。

實現(xiàn)原理：設(shè)置寬高相同，再設(shè)置圓角為寬高的一半，更方便的做法是直接設(shè)置圓角為50%。

看完了這篇文章，相信你對“css怎樣把div修飾成圓”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細節(jié)

猜你喜歡