2️⃣内容
在CSS中，新增了圆角边框样式。我们通过
border-radius
属性，设置元素外边框的圆角属性。即使元素没有设置边框
border
，圆角边框属性也可以应用到
background
上，其具体效果受到
background-clip
的影响。
语法如下：
border-radius: length | percentage [/ length | percentage];
border-radius属性接受两个参数，分别表示水平半径和垂直半径，两个参数用/分隔开；
如果第二个参数省略，则默认等于第一个参数的值
无论是水平半径还是垂直半径，都可以设置1~4个参数值；
并且参数值的类型也有两种：长度或百分比，二者都不允许出现负值；
使用百分数定义半径长度时，水平半径相对于盒模型的宽度；垂直半径相对于盒模型的高度；
该属性没有继承性
另外，border-radius属于简写属性，具体属性如下：
左上角：border-top-left-radius
右上角：border-top-right-radius
右下角：border-bottom-right-radius
左下角：border-bottom-left-radius
因此规则如下：
如果border-radius属性接受四个值，那么将按照上左、上右、下右、下左的顺序分别作用于四个角；
如果border-radius属性接受三个值，则第一个值作用于上左border-top-left-radius，第二个值作用于上右border-top-right-radius和下左border-bottom-left-radius，第三个值作用于下右border-bottom-right-radius
如果border-radius属性接受两个值，则第一个值作用于上左和下右，第二个值作用于上右和下左；
如果border-radius属性只接受一个值，此时将作用于四个角。
该规则适用于水平半径与垂直半径。
举个例子：
border-radius: 2px 4px 6px / 3px 5px;
上述CSS代码相当于：
border-top-left-radius: 2px 3px;
border-top-right-radius: 4px 5px;
border-bottom-right-radius: 6px 3px;
border-bottom-left-radius: 4px 5px;
3️⃣原理
那么，圆角边框的原理究竟是什么？
举个例子：
<!DOCTYPE html>
<style>
div {
width: 400px;
height: 200px;
background-color: skyblue;
border-top-left-radius: 70px;
</style>
</head>
<div></div>
</body>
</html>
上述圆角边框的效果 实现的原理在于：
用一个水平半径为70px，垂直半径也是70px的圆形图，紧贴在左上角
此时将左上角多余的部分裁剪掉，这样就有了圆角的效果
示意图如下：
再举一个例子：
div {
border-top-left-radius: 50px 80px;
此时效果的实现原理在于：
将一个水平半径为50px，垂直半径是80px的椭圆，紧贴在左上角
再将左上角多余的部分裁剪掉，这样就有了圆角的效果
示意图如下：
4️⃣写在最后
好了，今天的笔记就记到这里。
最后附上一个实用有趣的可视化工具【fancy-border-radius | 点击即可前往】
