CSS圆角原理

CSS圆角原理

border-radius: 50%;

当指定为百分比的时候，宽度乘百分比得到的数值作为半长轴，高度乘百分比得到的数值作为半短轴，得到一个椭圆，然后按下图切掉多余的部分。

border-radius: 50px;

当指定具体数值时，半长轴等于半短轴，得到一个圆，然后切掉多余的部分。

实现一个圆

1. 定义长宽相等的盒子
2. 让border-radius等于50%，或者宽度的一半px

参考

https://www.cnblogs.com/frontendengineer/p/13224089.html