卡卡網(wǎng)

當(dāng)你要用到一個(gè)圓形icon的時(shí)候，你可能想到通過(guò)圖片軟件來(lái)制作，事實(shí)上也確實(shí)如此，在css3之前，大家都是通過(guò)圖片+css來(lái)實(shí)現(xiàn)各種各樣的樣式效果。不過(guò)在css3出來(lái)之后，這種方法就顯得有點(diǎn)落伍了，它不但需要較多的代碼來(lái)實(shí)現(xiàn)，且要另外制作圖片，實(shí)在是繁瑣?，F(xiàn)在，我們用css3的代碼，輕松就能畫出實(shí)心圓了。

css3畫實(shí)心圓

實(shí)現(xiàn)方法相當(dāng)簡(jiǎn)單，css代碼如下：

.circle{
width:100px;
height:100px;
background-color:#cb18f8;
border-radius:50px; /* 圖形的半徑 */
}

execcodegetcode

代碼分析：

1） width 和 height 是定義一個(gè)矩形，它們的值均設(shè)為100px，即是畫一個(gè)正方形。

2）background-color 是定義圖形的背景顏色。

3）border-radius 是定義圖形的半徑，這里是50px，即是正方形邊長(zhǎng)的一半。border-radius 也可以用百分比來(lái)表示，如本例50px可以換為50%，效果是一樣的。

css3實(shí)現(xiàn)各種圓角的效果

我們可以把 border-radius 換成不同的數(shù)字，就能實(shí)現(xiàn)各種圓角的效果。

css3畫圓角

上圖的代碼只需把 border-radius 設(shè)為5px，代碼如下：

.circle{
width:100px;
height:100px;
background-color:#cb18f8;
border-radius:5px; /* 圓角的大小 */
}

execcodegetcode

如果不想4個(gè)角都是圓角，例如在很多導(dǎo)航菜單里，只需上面兩個(gè)角是圓角，又如何實(shí)現(xiàn)呢？

css3畫圓角

仍然是修改  border-radius ，不過(guò)寫法有點(diǎn)不同，代碼如下：

.circle{
width:100px;
height:100px;
background-color:#cb18f8;
/* 圓角的大小 排序：左上角 右上角 右下角 左下角 */
border-radius:5px 5px 0 0;
}

execcodegetcode

border-radius 屬性其實(shí)可以分為四個(gè)其他的屬性，在使用時(shí)可單獨(dú)設(shè)置：

border-radius-top-left /*左上角*/
border-radius-top-right /*右上角*/
border-radius-bottom-right /*右下角*/
border-radius-bottom-left /*左下角*/

本文實(shí)例演示

demodownload

注意問(wèn)題

本文css3代碼不支持IE8瀏覽器，但支持IE9+瀏覽器，確切來(lái)說(shuō)，是IE8不認(rèn) border-radius 這個(gè)css屬性，所以在IE8瀏覽器里，文中實(shí)例代碼永遠(yuǎn)是顯示一個(gè)正方形。

標(biāo)簽: css3  實(shí)心圓  圓角