border-radius 详解及示例

时间:2022-11-14 12:03:12
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} (右下角)

名词解释:
半径:边角距离圆切点的距离
百分比:宽度高度,边框,内边距的和作为基准值
 
特性:
任意相邻圆角的半径和大于边框长度时,会按照比例减少半径值,直到他们不会被重叠
任意圆角的水平半径和垂直半径比例恒定不变(水平半径过长,超过边框长度时,会将水平半径缩小,对应会按照比例减少垂直半径的长度)
 
示例:
四边顶角,半径均为长宽的一半,显示为标准圆形;
border-radius 详解及示例
height: 100px;
width: 100px;
border-radius:50px 50px 50px 50px / 50px 50px 50px 50px;
左侧顶角,水平方向半径20px,垂直方向半径50px;
border-radius 详解及示例
 height: 100px;
 width: 100px;
 border-radius:20px 50px 0 0 / 50px 50px 0 0;
异形,说明水平垂直比例缩放
border-radius 详解及示例
height: 100px;
width: 100px;
border-radius:200px 0 0 0 / 50px 0 0 0;
左侧顶角,水平方向半径200px,垂直方向半径50px;
由于水平半径长度大于100px,会将水平半径缩短为100px,又因为水平与垂直半径比例不变
当前水平半径输入值是垂直半径输入值的4倍,而水平真实半径为100px,所以垂直真实半径缩短为25px;
 
半椭圆
border-radius 详解及示例
height: 50px;
width: 100px;
border-radius:50% 50% 0 0 / 100% 100% 0 0;
四分之一椭圆
border-radius 详解及示例
height: 100px;
width: 100px;
border-radius:100% 0 0 0 / 100% 0 0 0;
四分之一椭圆,加上边框的效果示意:
border-radius 详解及示例
border-left: 5px solid #5e77bf;
background-color: transparent;
border-radius 详解及示例
border-top: 5px solid #5e77bf;
background-color: transparent;
同心圆的实现:
border-radius 详解及示例
height: 100px;
width: 100px;
border-radius:50%;
border-top: 5px solid #5e77bf;
background-color: transparent;