border-radius
OK,这篇文章详细介绍border-radius
属性的值得理解,以及在渲染上四个角的表现,如果平时只是用border-radius: 10px
加圆角或者用border-radius: 50%
做正圆形图标,强烈建议看一下这篇文章;如果已经了解了border-radius
的机制可以不用看下去了,当然如果有大佬看完了这篇文章发现了描述上、技术上、理解上的任何错误,还请在评论区多加指正,不胜感激!
简单描述
用于给元素添加外边框圆角
该属性是四个属性的简写,包括border-top-left-radius
、border-top-right-radius
、border-bottom-right-radius
和 border-bottom-left-radius
,
因此border-radius
在设置边框时,按照值的顺序分别指示左上、右上、右下、左下,且每一个圆角都相当于是一个圆形或椭圆形的四分之一的弧。
图示:
如上图,样式为border-radius: 100px 40px 60px 70px / 40px 40px 120px 70px;
,从左上到右下四个角分别是:横轴半径100px 竖轴半径40px的椭圆、半径为40px的圆、横轴半径60px 竖轴半径120px的椭圆、半径为70px的圆。
四角中每一个角设置圆角均需要两个值,分别设置椭圆的长半轴长度和短半轴长度(如果是圆形则两个值是相等的)。第一个值指示横轴半径,第二个值指示竖轴半径。
示例1:
// 该左上角边框是一个半径为20px的圆的四分之一
border-top-left-radius: 20px;
示例2:
// 该左上角边框是一个横轴半径20px 竖轴半径50px的椭圆的四分之一
border-top-left-radius: 20px 50px;
注:在元素没有设置边框的时候,圆角会作用在background上,链接
取值详解
border-radius
的值可以是固定长度(如px,em等等)或者百分比,其值所指示的是其对应的圆角的半径长度。
下面通过示例来看它各种取值的含义:
示例1:
border-radius: 100px 40px 60px 70px / 40px 40px 120px 70px;
// 相当于
border-top-left-radius: 100px 40px;
border-top-right-radius: 40px 40px;
border-bottom-right-radius: 60px 120px;
border-bottom-left-radius: 70px 70px;
这就是上面图对应的样式代码,也是该属性的完整写法,斜杠前指示四个角的横轴半径,斜杠后指示四个角的竖轴半径。
示例2:
border-radius: 30px 50px 40px 35px;
// 相当于
border-radius: 30px 50px 40px 35px / 30px 50px 40px 35px;
// 相当于
border-top-left-radius: 30px 30px;
border-top-right-radius: 50px 50px;
border-bottom-right-radius: 40px 40px;
border-bottom-left-radius: 35px 35px;
没有斜杠
/
的情况下,每个角的横轴半径和竖轴半径相同,也就是说每个角都是一个圆形的四分之一,
示例3:
border-radius: 40px 60px;
// 相当于
border-radius: 40px 60px 40px 60px;
// 相当于
border-radius: 40px 60px 40px 60px / 40px 60px 40px 60px;
// 相当于
border-top-left-radius: 40px 40px;
border-top-right-radius: 60px 60px;
border-bottom-right-radius: 40px 40px;
border-bottom-left-radius: 60px 60px;
如果只写两个值,则就像
margin
属性一样,分别指对称的两个位置。在这里40px指左上角和右下角,60px指右上角和左下角。