border-raduis

有两种写法：

第一种；

/*单值写法(简写)，会被解释为 top-left | top-right | bottom-right | bottom-left*/
border-raduis: 20px
/*类似于margin的简写化，顺时针*/
border-raduis: 20% 10%;

第二种：

/*加斜杠的写法，八个值(斜杠前4个值，后4个值)*/
border-raduis: 20% / 10%;

重点就在第二种写法：

它表示的是椭圆，斜杠前是椭圆的长半轴，斜杠后是椭圆的短半轴

例如：

border-raduis: 50% 50% 50% 50% / 10% 50% 50% 50%;

这里表示的就是，左上角的圆是斜杠前第一个50%(充当长半轴)，和斜杠后第一个50%(充当短半轴)，四个角的每个圆角都是这样一一配对而成的

效果如图:

border-radius MDN