CSS3学习笔记:利用border-radius实现圆角效果

在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属性。

三、基本应用实例

border-radius-01

如图是一个普通的评论对话框,默认是一个矩形框,现在我们给它加上圆角效果。


-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;

可以看到圆角效果出来了。

border-radius-02

可以让四个角有不同的值。


-moz-border-radius:20px 40px 60px 5px;
-webkit-border-radius:20px 40px 60px 5px;
border-radius:20px 40px 60px 5px;

可以看到四个角的弯曲程度不一样了。

border-radius-03

四、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 条评论

  1. 做得好认真,翻译的?

发表评论

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

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>