border-radius 详解及示例

border-radius [ˈbɔrdə(r)] - [ˈrediəs]

 

英文示意：

border：边界，国界，边疆

radius：半径，范围

 

定义：　

复合写法：

border-radius: [ length | % ] (可以设置宽度／百分比);

border-radius: [ length | % ]{1,4} (四个角：左上，右上，右下，左下 即顺时针方向);

border-radius: [ length | % ]{1,4} / [ length | % ]{1,4}(水平方向／垂直方向);

拆分写法：

border-垂直方向-水平方向-radius: 水平半径,垂直半径

border-top-left-radius: [ length | % ]{1,2} (左上角，第一参数代表水平半径，第二个参数代表垂直半径，若第二个参数省略，默认等于第一个参数);

border-top-right-radius:  [ length | % ]{1,2} (右上角)

border-bottom-left-radius: [ length | % ]{1,2} (左下角)

border-bottom-right-radius: [ length | % ]{1,2} (右下角)

名词解释：

半径：边角距离圆切点的距离

百分比：宽度高度，边框，内边距的和作为基准值

 

特性：

任意相邻圆角的半径和大于边框长度时，会按照比例减少半径值，直到他们不会被重叠

任意圆角的水平半径和垂直半径比例恒定不变（水平半径过长，超过边框长度时，会将水平半径缩小，对应会按照比例减少垂直半径的长度）

 

示例：

四边顶角，半径均为长宽的一半，显示为标准圆形;

height: 100px;
width: 100px;
border-radius:50px 50px 50px 50px / 50px 50px 50px 50px;

左侧顶角，水平方向半径20px，垂直方向半径50px;

 height: 100px;
 width: 100px;
 border-radius:20px 50px 0 0 / 50px 50px 0 0;

异形，说明水平垂直比例缩放

height: 100px;
width: 100px;
border-radius:200px 0 0 0 / 50px 0 0 0;

左侧顶角，水平方向半径200px，垂直方向半径50px;

由于水平半径长度大于100px，会将水平半径缩短为100px，又因为水平与垂直半径比例不变

当前水平半径输入值是垂直半径输入值的4倍，而水平真实半径为100px，所以垂直真实半径缩短为25px;

 

半椭圆

height: 50px;
width: 100px;
border-radius:50% 50% 0 0 / 100% 100% 0 0;

四分之一椭圆

height: 100px;
width: 100px;
border-radius:100% 0 0 0 / 100% 0 0 0;

四分之一椭圆，加上边框的效果示意:

border-left: 5px solid #5e77bf;
background-color: transparent;

border-top: 5px solid #5e77bf;
background-color: transparent;

同心圆的实现:

height: 100px;
width: 100px;
border-radius:50%;
border-top: 5px solid #5e77bf;
background-color: transparent;