這篇文章將為大家詳細(xì)講解有關(guān)如何在css中創(chuàng)建一個(gè)圓餅并填充顏色，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

柏鄉(xiāng)網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),柏鄉(xiāng)網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為柏鄉(xiāng)上千多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的柏鄉(xiāng)做網(wǎng)站的公司定做！

方法：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)頁(yè)文件，把他命名為test.html，接下來(lái)我們用test.html文件來(lái)講解css3如何實(shí)現(xiàn)一個(gè)圓形圖案效果。

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

編寫css樣式標(biāo)簽，mybkkd樣式將寫在該標(biāo)簽內(nèi)。

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

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

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

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

關(guān)于“如何在css中創(chuàng)建一個(gè)圓餅并填充顏色”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。