卡卡網(wǎng)

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

css3畫實心圓

實現(xiàn)方法相當簡單，css代碼如下：

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

execcodegetcode

代碼分析：

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

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

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

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

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

css3畫圓角

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

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

execcodegetcode

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

css3畫圓角

仍然是修改  border-radius ，不過寫法有點不同，代碼如下：

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

execcodegetcode

border-radius 屬性其實可以分為四個其他的屬性，在使用時可單獨設置：

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

本文實例演示

demodownload

注意問題

本文css3代碼不支持IE8瀏覽器，但支持IE9+瀏覽器，確切來說，是IE8不認 border-radius 這個css屬性，所以在IE8瀏覽器里，文中實例代碼永遠是顯示一個正方形。

標簽: css3  實心圓  圓角