IE9、 Firefox、Safari, Chrome的CSS3圆角属性

这篇文章主要是记录一下，微软最新发布的 IE9 浏览器CSS 圆角属性，现在CSS3已经可以轻松实现跨浏览器的圆角效果，包括Firefox高版本，IE9，Safari，Chrome等高端浏览器。

我们这样去定义一个盒子模型：

在Firefox，和Chrome中的效果：

其中 -moz-border-radius 是 Firefox 实现圆角的私有属性，而 -webkit-border-radius是 webkit 内核浏览器（如 Safari 和 Chrome）实现圆角的私有属性。

我们也可以分别设置4个圆角的属性值，例如这样的样式：

得到的效果如下图：

我们还可以使用CSS缩写样式实现圆角效果，例如下面的代码：

当然我们也可以为盒子模型添加边框属性：

IE 9 没有使用私有属性，直接使用 border-radius 定义圆角，border-radius 是定义四个角都是圆角，如果要具体的一个角，可以使用下面四个属性：

貌似当圆角数值小于4px时将失效

参考文章：http://web.d-times.net/2011/01/10/rounded.html