IE9、 Firefox、Safari, Chrome的CSS3圆角属性
浏览数：36 /
时间：2015年06月09日
这篇文章主要是记录一下，微软最新发布的 IE9 浏览器CSS 圆角属性，现在CSS3已经
可以轻松实现跨浏览器的圆角效果，包括Firefox高版本，IE9，Safari，Chrome等高端
浏览器。
我们这样去定义一个盒子模型：
|
1
2
3 |
-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius:10px; |
在Firefox，和Chrome中的效果：
其中 -moz-border-radius 是 Firefox 实现圆角的私有属性，而 -webkit-border-
radius是 webkit 内核浏览器(如 Safari 和 Chrome)实现圆角的私有属性。
我们也可以分别设置4个圆角的属性值，例如这样的样式：
|
1
2
3
4
5
6
7
8 |
-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; |
得到的效果如下图：
我们还可以使用CSS缩写样式实现圆角效果，例如下面的代码：
|
1
2 |
-moz-border-radius: 50px 30px 20px 10px;-webkit-border-radius:20px 10px 5px 50px; |
当然我们也可以为盒子模型添加边框属性：
|
1
2
3
4 |
-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius:10px;border:10px solid #69F; |
IE 9 没有使用私有属性，直接使用 border-radius 定义圆角，border-radius
是定义
四个角都是圆角，如果要具体的一个角，可以使用下面四个属性：
|
1
2
3
4 |
border-bottom-left-radius:5pxborder-bottom-right-radius:5pxborder-top-left-radius:5pxborder-top-right-radius:5px |
貌似当圆角数值小于4px时将失效
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
