方法: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中文網其他相關文章!