携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情

1️⃣前言

大家好，我是翼同学。今天笔记的内容是：

圆角边框：border-radius

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>
<html>
<head>
    <style>
        div {
            width: 400px;
            height: 200px;
            background-color: skyblue;
            border-top-left-radius: 70px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

上述圆角边框的效果实现的原理在于：

用一个水平半径为70px，垂直半径也是70px的圆形图，紧贴在左上角
此时将左上角多余的部分裁剪掉，这样就有了圆角的效果

示意图如下：

再举一个例子：

div {
    border-top-left-radius: 50px 80px;
}

效果为：

此时效果的实现原理在于：

将一个水平半径为50px，垂直半径是80px的椭圆，紧贴在左上角
再将左上角多余的部分裁剪掉，这样就有了圆角的效果

示意图如下：

4️⃣写在最后

好了，今天的笔记就记到这里。

最后附上一个实用有趣的可视化工具【fancy-border-radius | 点击即可前往】

【CSS·圆角边框】有关border-radius属性的记录以及实现原理

1️⃣前言

2️⃣内容

3️⃣原理

4️⃣写在最后