CSS3——border-radius圆角详解

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

Border-radius圆角属性

1
2
3
4
5
6
7
/* 四個方位角同时设定 */
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详解

先看一下基本语法。例如border-radius: 100px 25px 50px 50px / 50px 25px 50px 25px;

/斜杠前是水平方向圆角半径,斜杠后是垂直方向圆角半径。顺序同样遵守TRBL(Top-Right-Bottom-Left)原则,依此是上右下左的圆角水平半径 / 上右下左的圆角垂直半径。一图胜千言:(将代码和图对照着看一下,很容易就能明白)

如果没有/斜杠,表示圆角的水平和垂直半径的值相等(注意我这里说的是值相等,而不是相等。如果设的是px值,那水平和垂直半径是相等的。但如果设的是%百分比,那说明水平垂直半径有相同缩放比例,但不代表缩放后两个半径的px值相等。下面会有例子说明)。另外同遵守TRBL原则的其他属性一样可以简写:

1个值表示4个角的圆角半径均一样,例如border-radius: 10px;

2个值的话,第一个值代表上左和下右,第二个值代表上右和下左,例如border-radius: 10px 20px;

3个值的话,第一个值代表上左,第二个值代表上右和下左,第三个值代表下右,例如border-radius: 10px 20px 30px;

4个值的话,分别是上左,上右,下右,下左(即顺时针一圈)的圆角半径值,例如border-radius: 10px 20px 30px 40px;

水平、垂直半径

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

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

1
2
3
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左上角单独设定水平 垂直半径 */

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

圆角曲线

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

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%时矩形则变成椭圆;如果是正方形则变成特殊的椭圆:圆。如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.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比例比例缩小半径;如果一个矩形在相邻同方向上的半径都相等,则这个矩形都将变形成椭圆,如果是正方形则一直是圆形,如下代码:

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

border-radius内、外半径之分

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

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

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

上例代码则出现如下图



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

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

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

上例代码则出现如下图


注意点

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

坚持原创技术分享,您的支持将鼓励我继续创作!