一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第23天，点击查看活动详情。
border-raduis
border-raduis的值：px、%、em
数值的理解
使用px表示数值的情况：
- 比如border-raduis：30px，表示是一个以30px为半径的圆定格放置在四个边角后所呈现的弧度。
- 圆：宽高一样，border-raduis宽高的一半。
- 半圆：宽高比例为1：2，border-raduis中的两个值大小为比例为1的值，其他值为0.
- 1/4圆：宽高一样，border-raduis其中一个值设置为和宽高一样，其他为零，根据自己所需要的方向决定。
使用%表示数值的情况：
- 如果宽高一样的话，判断方法与第一点一致，只不过想象的时候需要将宽高乘以百分数换算一下。
- 如果宽高不一致，其实就是以对象的宽高乘以百分数后得到的值r1和r2，作为两条半径绘制出来的椭圆产生的弧度。
- 椭圆：宽高不一致，border-raduis：50%。
需要注意的情况：
在设置对象为圆的时候，如果使用了border、padding等，对象的实际宽高已经不再是设置的width、height的数值，如果继续使用px且值是原本width的一半，可能达不到圆形。这种情况可以使用%，设置为50%来解决。
设置数值的写法：
仅设置一个值：仅需设置一个数值，即可给元素的四个边角设置统一的圆角弧度。（设置圆数值为宽度高度的一半）
设置四个方向的值：
- border-top-left-raduis、border-top-right-raduis、border-bottom-right-raduis\border-bottom-left-raduis四个属性的简写模式。border-raduis：30px等价于border-raduis：30px 30px 30px 30px。分别是左上角、右上角、右下角、左下角的顺序。
省略部分值：类比padding、margin，可以省略部分值，省略采用对角线相等的原则。左上角对应右下角，右上角对应左下角。
