怎麼在css中創建一個圓餅並填滿顏色

方法：1、為元素新增「width:直徑值;height:直徑值」樣式建立一個正方形；2、為元素新增「border-radius:50%」樣式設定正方形圓角使其變成圓形；3、為元素加上「background:顏色值」樣式為圓形填滿顏色即可。

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

在css中建立一個圓餅並填滿顏色的方法

#1、我們新建一個html網頁文件，把他命名為test .html，接下來我們用test.html檔來講解css3如何實現一個圓形圖案效果。

在test.html檔案內，要使用div標籤。為div標籤加上一個樣式，設定div標籤的class屬性為mybkkd。

編寫css樣式標籤，mybkkd樣式將寫在該標籤內。

在css標籤內，透過div標籤的class屬性mybkkd實作一個圓形圖案效果。

2、在css樣式標籤裡，在括號內，mybkkd的div設定css屬性樣式為，width和height屬性設定為相同的值表示為圓的直徑長度，border-radius屬性用於設定圓角，50%時圓角圖形剛好是圓形，background屬性用來設定圓形的顏色。

width: 100px;
height: 100px;
background: red;
border-radius: 50%

在瀏覽器瀏覽test.html，來看看效果能否實現。

更多程式相關知識，請造訪：程式設計影片！ ！

以上是怎麼在css中創建一個圓餅並填滿顏色的詳細內容。更多資訊請關注PHP中文網其他相關文章！