首頁 > 文章 > web前端 > css如何把div修飾成圓

css如何把div修飾成圓

css把div修飾成圓形的方法：先新建一個html檔；然後在body標籤內輸入「1331fce85752e1268a1f748c03848cfe16b28748ea4df4d9c2150843fecfba68」；最後在head表裡加入style標籤，並新增“border-radius”屬性即可。

css如何把div修飾成圓

本教學操作環境：Dell G3電腦、Windows7系統、HTML5&&CSS3版本。

css把div修飾成圓形

1、開啟程式碼編輯器，新建一個html文件，寫上基本的結構

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

2、在body標籤內輸入：1331fce85752e1268a1f748c03848cfe16b28748ea4df4d9c2150843fecfba68，這裡的div就是用來畫圓形的標籤。（建議學習：CSS影片教學）

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

3、在head表裡加入style標籤，輸入下面程式碼

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

5、儲存好程式碼，開啟瀏覽器即可看見圓形。

實現原理：設定寬高相同，再設定圓角為寬高的一半，更方便的做法是直接設定圓角為50%。

以上是css如何把div修飾成圓的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

看更多