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

品味人生 • 发布于 2019-02-01 21:37:02

这个家伙很害羞,不想介绍自己!

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

首先介绍一下语法:

border-radius:[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

<length>:用长度值设置对象的圆角半径长度;不允许负值。

<percentage>:用百分比设置对象的圆角半径长度;不允许负值。

 

说明一下:

第一个值是水平半径。

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

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

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

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

 

CSS3适用的浏览器:

IE9.0、Firefox、Safari、Chrome、Opera

 

CSS3测试实例:

水平与垂直半径相同时:



  • 提供1个参数
    border-radius:10px;

  • 提供2个参数
    border-radius:10px 20px;

  • 提供3个参数
    border-radius:10px 20px 30px;

  • 提供4个参数
    border-radius:10px 20px 30px 40px;


水平与垂直半径不同时:



  • 提供1个参数
    border-radius:10px/5px;

  • 提供2个参数
    border-radius:10px 20px/5px 10px;

  • 提供3个参数
    border-radius:10px 20px 30px/5px 10px 15px;

  • 提供4个参数
    border-radius:10px 20px 30px 40px/5px 10px 15px 20px;


 

 

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

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

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

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

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