CSS3欲速则不达—border-radius圆角详解

早期制作圆角都是使用图片来实现、通过用1px 的水平线条来堆叠出圆角或者利用JavaScript等等方法,但是都是需要增加多个无意义的标签来实现,造成代码亢余。如今有了CSS3的圆角属性——border-radius后,我们不必会每种不同的圆角制作图片而烦恼了,即减少了图片的更新制作,减少了亢余标签,我们可以直接使用CSS3中的Border-radius来制作。

Border-radius圆角属性

/* 四個方位角同时设定 */
border-radius: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
/* 分別设定 */
border-top-right-radius: [ <length> | <percentage> ] [ <length> | <percentage> ]?
border-bottom-right-radius: [ <length> | <percentage> ] [ <length> | <percentage> ]?
border-bottom-left-radius: [ <length> | <percentage> ] [ <length> | <percentage> ]?
border-top-left-radius: [ <length> | <percentage> ] [ <length> | <percentage> ]?
Border-radius基本语法:

取值:

<length>:用长度值设置对象的圆角半径长度,单位可以是em、ex、pt、px。不允许负值。

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

浏览器支持情况

截至文章发表,除了IE9以下不支持,firefox和chrome等现代浏览器最新版本都支持border-radius 。

编写代码时可以直接写border-radius,也可以前加-webkit或者-moz前缀。注意如果border-radius单独写给Mozilla (火狐),Mozilla (火狐)写法跟W3C标准写法(webkit的实现方法与W3C一样)有点不同,如下

  • 上左:W3c的写法:border-top-left-radius,Mozilla (火狐)的写法: -moz-border-radius-topleft
  • 上右:W3c的写法:border-top-right-radius,Mozilla (火狐)的写法: -moz-border-radius-topright
  • 下右:W3c的写法:border-bottom-right-radius,Mozilla (火狐)的写法: -moz-border-radius-bottomright
  • 下左:W3c的写法:border-top-left-radius,Mozilla (火狐)的写法: -moz-border-radius-bottomleft
.radius1 {
    border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px;
}
/*这个等同于*/
.radius2 {
    border-top-left-radius: 10px 40px;
    border-top-right-radius: 20px 30px;
    border-bottom-right-radius: 30px 20px;
    border-bottom-left-radius: 40px 10px;
}
圆角可一起写在border-radius属性,也可以四个值分开写

Border-radius详解

border-radius方位简写方式

border-radius有四个值是按照top-left、top-right、 bottom-right、 bottom-left的顺序来设置,border-radius简写方式如下

  1. border-radius只有一个方位上的角度值时,四个角具有相同的圆角值
  2. border-radius有两个方位上的角度值时,top-left和bottom-right是第一个圆角值;top-right等于bottom-left是第一个圆角值。
  3. border-radius有三个方位上的角度值时,此时top-left是第一个圆角值;top-right是第二个圆角值;bottom-right是第三个圆角值;bottom-left是第二个圆角值;
  4. border-radius有四个方位上的角度值时,此时top-left是第一个圆角值;top-right是第二个圆角值;bottom-right是第三个圆角值;bottom-left是第四个圆角值;

border-radius简写实例代码,如下:

/* 先设定 X 轴(水平)再设定 Y 轴(垂直) */
.radius3 {
    border-radius: 70px 10px 10px 10px / 70px 10px 10px 10px;
}
border-radius简写

水平、垂直半径

border-radius圆角半径有水平和垂直半径之分,如果“/”前后的值都存在,那么“/”前面的值设置其水平半径,“/”后面值设置其垂直半径。如果没有“/”,则水平和垂直半径相等。

而如果border-(top或bottom)-(left或right)-radius四个分开来写,不是用“/”来表示水平、垂直半径而是以空格分隔来表示。如下:

border-radius:10px 20px 30px 100px/5px 10px 15px 80px; /*“/”前面四个参数代表四角上的水平半径,“/”后面四个参数代表四角上的垂直半径 */
border-radius:10px / 10px 5px;/*水平半径都为10px,垂直两两对应10px和5px */
border-top-left-radius:10px 30px; /*border-radius左上角单独设定水平 垂直半径 */

因为圆角有水平、垂直半径之分,所以圆角不仅可以使圆角的,可以是椭圆角的,

圆角曲线

水平/垂直半径决定了该角落的曲线。下图展示了可能出现不同绝对长度半径的几中情况:

CSS3欲速则不达—border-radius圆角详解

border-radius圆角曲线

border-radius圆角不允许相互重叠,所以当相邻两个角半径之和大于所在矩形区域高/宽的大小时,曲线圆角将以同样比例收縮所有相应半径直到曲线彼此不重叠。这个比例如下:f = min(Li/Si),i ∈ {top, right, bottom, left},Ltop = Lbottom = 所在边界框的宽,Lleft = Lright = 所在边界框的高。如果f < 1,那么所有角半径都乘以f。可以理解为,当Li< Si时,圆角曲线半径按f比例缩小。

border-radius圆角曲线绝对长度是一种表现形式,百分比也可以表示。而百分比则是以边界框为标准。所以使用百分比圆角曲线大小受边界框的宽、高影响。

现在我们拿百分比来实验相邻圆角半径之和Si大于Li。

首先我们得清楚在50%情况下,水平、垂直半径各是多少,如下:

  • box-sizing: content-box时:水平半径50%等于width/2+padding+border;垂直半径则等于height/2+padding+border
  • box-sizing: border-box时:水平半径50%等于width/2;垂直半径则等于height/2

当水平、垂直都是50%时矩形则变成椭圆;如果是正方形则变成特殊的椭圆:圆。如下代码:

.radius-content-box{
    width: 40px;
    height: 40px;
    border: solid 30px;
    padding: 10px;
    border-color: orange orange silver silver;
    border-top-left-radius: 50%;
    border-top-right-radius: 60px;/*box-sizing是border-box时水平半径50%等于width/2+padding+border(水平方向上的),垂直半径等于height/2+padding+border*/
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    /*box-sizing默认值是content-box;*/
}
.radius-border-box {
    width: 90px;
    height: 90px;
    padding: 10px;
    border: solid 30px;
    border-color: orange orange silver silver;
    border-top-left-radius: 50%;
    border-top-right-radius: 45px;/*box-sizing是border-box时水平半径50%就是width值(水平方向上的),垂直半径等于heigh值*/
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
border-radius圆角曲线等于50%时

所以在半径等于50%时,矩形就会变成椭圆,正方形变成圆形。如果大于50%,即半径和大于相应边界框的宽(高)时,则按照上面说的 f = min(Li/Si) f比例比例缩小半径;如果一个矩形在相邻同方向上的半径都相等,则这个矩形都将变形成椭圆,如果是正方形则一直是圆形,如下代码:

.radius5 {
    border-radius: 50%; /*60%、100%、129%	都是圆形 */
}

border-radius内、外半径之分

内边半径等于外边半径减去对应边border的宽度,既border-width影响圆角的内半径。

所以当border-radius半径小于等于border-width的宽度时,border-radius圆角无内角;当border-radius半径大于border-width的宽度时,border-radius出现内角,看起来像一个圈。如下代码:

.radius-boder-width{
    border: 25px solid red;
    border-radius: 15px 25px 45px 65px;
}

上例代码则出现如下图

你看我top上的内圈还是直角的,囧~~~
border-radius内半径受border-width影响

如果角的两个相邻边框(border)有不同的宽度,那么这个角将会从宽的边平滑过度到窄的边。其中一条边甚至可以是0。所有border-style(solid、dotted、inset等)跟著border-radius圆角的的曲線走。

这里还得注意在条相邻边的border-style转变的中心点是在一个和两边宽度成正比的角上。比如,两条边宽度相同,这个点就是一个45°的角上,如果一条边是另外一条边的两倍,那么这个点就在一个30°的角上。界定这个转变的线就是连接在内外曲线上的两个点的直线。

.radius-border-width-style{
    border-color: red blue green yellow;
    border-style: solid;
    border-width: 10px 5px;
    border-radius: 80px/40px;
}

上例代码则出现如下图

border之间的分界线也受border-width的影响
border分界线

border-radius应用

注意点

  1. border-radius不能直接作用于img元素,除firefox其他浏览器貌似效果有点悲剧,border-radius将图片内容都剪切了
  2. 因为table的样式属性border-collapse是collapse时,所以border-radius圆角不能正常显示,只有border-collapse: separate;时才能正常显示。

持续更新 本页所有DEMO

本文源链接:http://www.html5jscss.com/css3-border-radius.html

转载请注明《CSS3欲速则不达—border-radius圆角详解》| html5jscss