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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

这篇文章主要是记录一下，微软最新发布的 IE9 浏览器CSS 圆角属性，现在CSS3已经

可以轻松实现跨浏览器的圆角效果，包括Firefox高版本，IE9，Safari，Chrome等高端

浏览器。

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

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

在Firefox，和Chrome中的效果：

其中 -moz-border-radius 是 Firefox 实现圆角的私有属性，而 -webkit-border-

radius是 webkit 内核浏览器(如 Safari 和 Chrome)实现圆角的私有属性。

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

-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 50px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;

得到的效果如下图：