首頁  >  文章  >  web前端  >  怎麼在css中創建一個圓餅並填滿顏色

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

WBOY
WBOY原創
2021-11-18 16:58:332973瀏覽

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

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

本教學操作環境: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實作一個圓形圖案效果。

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

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

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

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

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

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

更多程式相關知識,請造訪:程式設計影片! !

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

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