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} (右下角)
名词解释:
半径:边角距离圆切点的距离
百分比:宽度高度,边框,内边距的和作为基准值
特性:
任意相邻圆角的半径和大于边框长度时,会按照比例减少半径值,直到他们不会被重叠
任意圆角的水平半径和垂直半径比例恒定不变(水平半径过长,超过边框长度时,会将水平半径缩小,对应会按照比例减少垂直半径的长度)
示例:
四边顶角,半径均为长宽的一半,显示为标准圆形;
![](https://i-blog.csdnimg.cn/blog_migrate/0891a36e3caeaae74df686de9cbc1a82.png)
height: 100px;
width: 100px;
border-radius:50px 50px 50px 50px / 50px 50px 50px 50px;
左侧顶角,水平方向半径20px,垂直方向半径50px;
![](https://i-blog.csdnimg.cn/blog_migrate/e396fae4a998ff2f37ad9f909772bf68.png)
height: 100px;
width: 100px;
border-radius:20px 50px 0 0 / 50px 50px 0 0;
异形,说明水平垂直比例缩放
![](https://i-blog.csdnimg.cn/blog_migrate/823b8800b98d31b2b835e9ff6ed125ec.png)
height: 100px;
width: 100px;
border-radius:200px 0 0 0 / 50px 0 0 0;
左侧顶角,水平方向半径200px,垂直方向半径50px;
由于水平半径长度大于100px,会将水平半径缩短为100px,又因为水平与垂直半径比例不变
当前水平半径输入值是垂直半径输入值的4倍,而水平真实半径为100px,所以垂直真实半径缩短为25px;
半椭圆
![](https://i-blog.csdnimg.cn/blog_migrate/4e9347547c3f26f0a1dcafd0acfbdf7e.png)
height: 50px;
width: 100px;
border-radius:50% 50% 0 0 / 100% 100% 0 0;
四分之一椭圆
![](https://i-blog.csdnimg.cn/blog_migrate/1b374090da07ce8299434f9e89b82983.png)
height: 100px;
width: 100px;
border-radius:100% 0 0 0 / 100% 0 0 0;
四分之一椭圆,加上边框的效果示意:
![](https://i-blog.csdnimg.cn/blog_migrate/98e6affa3d906665fcd6b50426aef27f.png)
border-left: 5px solid #5e77bf;
background-color: transparent;
![](https://i-blog.csdnimg.cn/blog_migrate/a0a94f736469349c2baca32a40c76e43.png)
border-top: 5px solid #5e77bf;
background-color: transparent;
同心圆的实现:
![](https://i-blog.csdnimg.cn/blog_migrate/68f0019b3ebcce85fd837d5b27ecd215.png)
height: 100px;
width: 100px;
border-radius:50%;
border-top: 5px solid #5e77bf;
background-color: transparent;