记录：border-radius 多个值，带/的值

记录：border-radius 多个值，带/的值

1.单一值

border-radius最常用的方式就是 圆形

border-radius：50%

其次就是0~100%、px、em…各种圆

2.两个值

border-radius: 80px 180px;

两个值：

第一个值代表左上角 右下角

第二个值代表右上角 左下角

记忆：左上角起，对角，顺时针

3.带/的两个值

border-radius: 80px/180px;

/之前的值是水平半径，/之后 的值是垂直半径，如果没有/，就会默认两个值相等。

4.3个值

border-radius: 80px 180px 120px;

记忆：左上角起，对角，顺时针

5.4个值

除了设置单一值，我们还可以设置4个值

border-radius: 10% 20% 30% 40%;

四个值分别是 左上角 右上角 右下角 左下角

记忆：左上角起，顺时针

6.带/的4个值 6个值 8个值…

此处不举例子了

有一个可以自己在线调试的网站： https://9elements.github.io/fancy-border-radius/

可以调整出来花瓣形、叶子形、盾牌形、水滴型…