border-radius详解分享

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指右上角和左下角。

参考链接

border-radius[MDN]