在CSS2.1里,要实现圆角,只能用图片,而且要嵌套一些层才行,而CSS3可以创建出非常好看的圆角,不需要任何图片,这一切都是使用CSS3里面的border-radius属性实现的。
一、border-radius语法
CSS3中几乎所有新增属性都在持续开发并争取浏览器的支持,因此使用时,需要加上浏览器前缀。
-moz-border-radius:像素值; -webkit-border-radius:像素值; -border-radius:像素值;
无前缀的属性一般被置于最末,这样当浏览器确实支持该属性时就会覆盖之前的规则。
border-radius并非只能指定一个值,跟很多CSS属性一样,它可以按“左上、右上、右下、左下”的顺时针方式指定像素值,如果4个值不一样,则会产生一个不规则的圆角矩形。
二、浏览器支持程度
IE 9以上版本支持,Firefox、Opera、Safari、Chrome都支持,是可以应用起来的CSS3属性。
三、基本应用实例
如图是一个普通的评论对话框,默认是一个矩形框,现在我们给它加上圆角效果。
-moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px;
可以看到圆角效果出来了。
可以让四个角有不同的值。
-moz-border-radius:20px 40px 60px 5px; -webkit-border-radius:20px 40px 60px 5px; border-radius:20px 40px 60px 5px;
可以看到四个角的弯曲程度不一样了。
四、IE8以下版本兼容方案
有很多脚本可以在低版本IE实现圆角,我推荐使用“PIE”,作者是Jason Johnston(http://css3pie.com)。这个脚本可以从CSS里读取border-radius的值,并且使其在低版本IE上正常工作。之所以推荐PIE,是因为它使用起来比较简单,而且对很多CSS3效果都有用。
使用方法:
1. 在官网(http://css3pie.com)下载PIE脚本文件。
2. 解压压缩档,可以看到里面有很多种类型的PIE文件,我们只需要用到PIE.htc即可,把PIE.htc放到css文件目录里。
3. 在圆角代码后,添加以下代码:
behavior: url(PIE.htc);
4. 在IE下预览,就可以看到效果了。
五、应用扩展实例
利用border-radius实现圆形或椭圆形。
要绘制一个正圆,首先给盒容器设定一个相同的width和height值,然后应用border-radius属性,把值设置为width/height的一半,就可以生成一个正圆了。
要实现椭圆形,需要为border-radius指定一对由正斜杠分割的尺寸值,例如:border-radius:50px/20px。具体可以试验一下。
《CSS3学习笔记:利用border-radius实现圆角效果》有 2 条评论