CSS3中的border-radius样式应用详解教程

　　border-radius是CSS3中诞生的新样式，它可以使边框的边角变成弧形和圆角。以往制作按钮、弧形边框时需要使用背景切图的方式实现；不但臃肿，而且还容易产生布局BUG，不适于自适应框架的书写。

　　首先介绍一下语法：

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

　　：用长度值设置对象的圆角半径长度；不允许负值。

　　：用百分比设置对象的圆角半径长度；不允许负值。

　　说明一下：

　　第一个值是水平半径。

　　如果第二个值省略，则它等于第一个值，这时这个角就是一个四分之一圆角。

　　如果第二个值为任意值，则会改变圆角的弧度，具体效果下面会举例进行演示

　　如果任意一个值为0，则这个角是矩形，不会是圆的。

　　当然，此值不允许是负值。

　　CSS3适用的浏览器：

　　IE9.0、Firefox、Safari、Chrome、Opera

　　CSS3测试实例：

　　除了以上的几种表达方式以外，还可以指定某个角生成弧形样式。

　　左上角圆角：border-radius-topleft : 10px

　　右上角圆角：border-radius-topright: 10px

　　左下角圆角：border-radius-bottomleft : 10px

　　右下角圆角：border-radius-bottomright : 10px

本站资源均来自互联网或会员发布，如果不小心侵犯了您的权益请与我们联系。我们将立即删除！谢谢！