圆角在网站的应用中非常广泛，也有不少高人提供了不少圆角的实现方法，但大多都有局限性，如果CSS3中的这个圆角功能被大多数浏览器所支持，那实现圆角效果就相当简单了！

曾经转载过一篇《5个CSS3技巧》，里面介绍了5种CSS3.0版本的新应用，虽然CSS3.0的正式标准还遥遥无期，但是不少人已经经不住它的诱惑，开始体验这些早已让人垂涎的新功能。WPer都知道WORDPRESS7的后台就应用了不少圆角，当然IE是不支持这些新效果的，只有在FF、Chrome、Safari等这些浏览器下才能够正确显示，即便是这样，这些浏览器也只有在各自的私有属性支持下方可。

实现圆角的就是CSS中的border-radius属性，它实现圆角的方式如下图所示，分别由top-left、top-right、bottom-right、bottom-left的值对每个圆角的两个半径进行控制（Firefox中只能对每个角设置一个半径，而且各属性的命名方式也不同：topleft、topright、bottomright、bottomleft）：

以下面这个框框为例，例举在两种核心浏览器中应用圆角的具体方法：

————– Mozilla核心的分割线 ———————

Mozilla核心浏览器如Firefox，设置其私有属性为：-moz-border-radius: 10px; 在用FF浏览本篇文章时那么你将可以看到下面的圆角效果：

也可以单独设置每一个角的值（上左、上右、下右、下左），但每个属性只能用一个值：

1
2
3
4

-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 0;

也可以把这些属性缩写使用：-moz-border-radius: 15px 10px 5px 0; 和margin和padding的值缩写方式一样，效果如下：

————– Webkit核心的分割线 ———————

Webkit核心浏览器如Chrome，设置其私有属性为：-webkit-border-radius: 10px; 在用Chrome浏览本篇文章时你将可以看到下面的圆角效果：

当然在这种核心的浏览器下也可以单独的设置每一个角，但和Firefox不同的是，每个角可以用两个值进行更精细的控制：

1
2
3
4

-webkit-border-top-left-radius: 30px 15px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 0;

在用Chrome浏览时可发现，左上角因有两个不同的值控制而呈现椭圆形角，效果如下：

这些属性也可以缩写，但是好像没有Firefox浏览器支持的那样灵活，只能设两个值（四个值将会失效），如 -webkit-border-radius: 30px 10px; 显示如下：

但是我用Chrome看效果的时候发现其渲染的圆角效果并不是很好，囧。

为了兼容这些不同核心的浏览器，可以同时使用它们各自的私有属性：

1
2
3
4

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;

本博客的评论框也应用了圆角效果^_^。

————– 我是分割线 ———————
参考文章：
1. CSS3圆角属性在Firefox,Chrome,Safari的实现
2. mozilla 和webkit的 CSS圆角
3. border-radius与圆角