一直以为border-radius就一个属性值，用来表示元素边框的圆角值。今天看了文档才知道原来它是四个属性的缩写：
border-top-left-radius:左上圆角border-top-right-radius:右上圆角border-bottom-right-radius:右下圆角border-bottom-left-radius:左下圆角
其中每个都有两个值，都可以是length值或者percentage值。
第一个值代表x轴上的半径，第二个代表y轴上的半径，如果只有一个值，那就等同于两个值是一样的
那么border-radius的值就有8个啦，哈哈哈哈
以 / 为界，前面四个为左上、右上、右下、左下的x轴半径，后面四个为左上、右上、右下、左下的y轴半径，两两配对，比如1和5配对，2和6...
这是完全体，如果没写全，那么它就会自动补全，补充的规律是:
- 一个的话全补充
- 奇对奇补充，偶对偶补充
所以就比如：
1. border-radius: 10px
===
border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px
2. border-radius: 10px 20px
===
border-radius: 10px 20px 10px 20px / 10px 20px 10px 20px
3. border-radius: 10px 20px 40px / 50px 60px 70px
===
border-radius: 10px 20px 40px 20px / 50px 60px 70px 60px
这就是border-radius的完整属性啦，我们可以实现一些常用的图形背景：
配合animation以及svg就可以实现👆的效果啦
