CSS3圆角只需设置一个属性:border-radius(含义是"边框半径")。你为这个属性提供一个值,就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用:em、ex、pt、px、百分比等等。
CSS3的border-radius属性在主流浏览器中的写法:
border-radius属性都遵循top-left(左上)、top-right(右上)、bottom-right(右下)、bottom-left(左下)的顺序,并且都是先Y轴后X轴。
border-radius只有在以下版本的浏览器:Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+支持border-radius标准语法格式,对于老版的浏览器,border-radius需要根据不同的浏览器内核添加不同的前缀,比说Mozilla内核需要加上“-moz”,而Webkit内核需要加上“-webkit”等,那么我们为了能兼容各大内核的老版浏览器,我们看看border-radius在不同内核浏览器下的书写格式:
1、Mozilla(Firefox,Flock等浏览器)
-moz-border-radius-topleft: //左上角 -moz-border-radius-topright: //右上角 -moz-border-radius-bottomright: //右下角 -moz-border-radius-bottomleft: //左下角 等价于: -moz-border-radius: //简写
2、WebKit (Safari,Chrome等浏览器)
-webkit-border-top-left-radius: //左上角 -webkit-border-top-right-radius: //右上角 -webkit-border-bottom-right-radius: //右下角 -webkit-border-bottom-left-radius: // 左下角 等价于: -webkit-border-radius: //简写
3、Opera浏览器:
border-top-left-radius: //左上角 border-top-right-radius: //右上角 border-bottom-right-radius: //右下角 border-bottom-left-radius: //左下角 等价于: border-radius: //简写
4、Trident (IE)
IE<9不支持border-radius;IE9下没有私有格式,都是用border-radius,其写法和Opera是一样的。
为了不管是新版还是老版的各种内核浏览器都能支持border-radius属性,那么我们在具体应用中时需要把我们的border-radius格式改成:
-moz-border-radius: -webkit-border-radius: border-radius:
如果需要拆分开的就等价于下面的代码:
-moz-border-radius-topleft: //左上角 -moz-border-radius-topright: //右上角 -moz-border-radius-bottomright: //右下角 -moz-border-radius-bottomleft: //左下角 -webkit-border-top-left-radius: //左上角 -webkit-border-top-right-radius: //右上角 -webkit-border-bottom-right-radius: //右下角 -webkit-border-bottom-left-radius: // 左下角 border-top-left-radius: //左上角 border-top-right-radius: //右上角 border-bottom-right-radius: //右下角 border-bottom-left-radius: //左下角