CSS3.0新特性二之Border-radius

关于Border-radius/圆角(边框半径)

Border-radius 无需背景图片就能给HTML元素添加圆角。有了这个属性实现圆角就简单啦,它可能是使用最多的CSS3属性了。已往实现圆角大多是使用背景图片或是Javascript,不仅额外增加HTML标签也影响了性能。现在简单了简单的一句CSS代码就能实现了。唯一缺点:浏览器兼容性不全(IE),尽管这样还是值得我们去学习的!

基本语法

border-radius: [  |  ]{1,4} [ / [  |  ]{1,4} ]?

举例:

border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
border-radius: 5px;
border-radius: 5px 10px / 10px;

第一组值代表四个圆角水平半径,第二组值代表四个圆角的垂直半径(可选,以”/”开头);

如果只有一个值则代表圆角水平和垂直的半径。

border-*-*-radius: [  |  ] [  |  ]?

举例:

border-top-left-radius: 10px 5px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10%;
border-bottom-right-radius: 10% 5%;

不懂?看了这个图就明白了! css3 border-radius

说明:Firefox(Gecko) 比较特殊 语法:

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

浏览器支持

Firefox(Gecko): 1.0 开始支持 从4.0开始不需要加-moz前缀
Chrome: 0.2 开始支持 从4.0开始不需要加-webkit前缀
Internet Explorer: 9.0 开始支持
Opera: 10.5 开始支持
Safari: 3.0 开始支持 从5.0开始不需要加-webkit前缀

跨浏览器示例:

A
B
C
D
E
F
#A {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}
#B {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
}
#Example_C {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
}
#D {
height: 5em;
width: 12em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}
#E {
height: 65px;
width:160px;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}
#F {
height: 70px;
width: 70px;
-moz-border-radius: 35px;
border-radius: 35px;
}

“CSS3.0新特性二之Border-radius”的3个回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注