方法：1、給元素添加“width:直徑值;height:直徑值”樣式創(chuàng)建一個(gè)正方形；2、給元素添加“border-radius:50%”樣式設(shè)置正方形圓角使其變成圓形；3、給元素添加“background:顏色值”樣式給圓形填充顏色即可。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

在css中創(chuàng)建一個(gè)圓餅并填充顏色的方法

1、我們新建一個(gè)html網(wǎng)頁文件，把他命名為test.html，接下來我們用test.html文件來講解css3如何實(shí)現(xiàn)一個(gè)圓形圖案效果。

在test.html文件內(nèi)，要使用div標(biāo)簽。給div標(biāo)簽加上一個(gè)樣式，設(shè)置div標(biāo)簽的class屬性為mybkkd。

編寫css樣式<style type="text/css"></style>標(biāo)簽，mybkkd樣式將寫在該標(biāo)簽內(nèi)。

在css標(biāo)簽內(nèi)，通過div標(biāo)簽的class屬性mybkkd實(shí)現(xiàn)一個(gè)圓形圖案效果。

2、在css樣式標(biāo)簽里，在括號內(nèi)，mybkkd的div設(shè)置css屬性樣式為，width和height屬性設(shè)置為相同的值表示為圓的直徑長度，border-radius屬性用于設(shè)置圓角，50%時(shí)圓角圖形正好是圓形，background屬性用于設(shè)置圓形的顏色。

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

在瀏覽器瀏覽一下test.html，來看看效果能否實(shí)現(xiàn)。