卡卡网

当你要用到一个圆形icon的时候，你可能想到通过图片软件来制作，事实上也确实如此，在css3之前，大家都是通过图片+css来实现各种各样的样式效果。不过在css3出来之后，这种方法就显得有点落伍了，它不但需要较多的代码来实现，且要另外制作图片，实在是繁琐。现在，我们用css3的代码，轻松就能画出实心圆了。

css3画实心圆

实现方法相当简单，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实现各种圆角的效果

我们可以把 border-radius 换成不同的数字，就能实现各种圆角的效果。

css3画圆角

上图的代码只需把 border-radius 设为5px，代码如下：

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

execcodegetcode

如果不想4个角都是圆角，例如在很多导航菜单里，只需上面两个角是圆角，又如何实现呢？

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  实心圆  圆角