纯CSS制作各种图形(多图预警)

https://zhuanlan.zhihu.com/p/20128284

border-radius 的工作原理

但是有时候我看到有的人会用 border-radius: 100%; 实现圆形的效果，在前段时间的一个项目中我想都没想就这么使用了，看起来和 50% 并没有什么区别。是什么原因呢？

在 Lea Verou 的演讲 The Humble Border Radius 中，她说到 W3C 对于重合曲线有这样的规范：如果两个相邻的角的半径和超过了对应的盒子的边的长度，那么浏览器要重新计算保证它们不会重合。

如果左上角的圆角半径被设置成了100%，那么圆角就会从这个方形左下角跨到右上角，相当于把圆角半径设置成为150px（也就是方形的大小）。如果同时把右上角的圆角半径也设置成为100%，则两个相邻圆角合起来就有200%。这种情况自然是不允许出现的，所以浏览器就会重新就算，匀出空间给右边的圆角，同时缩放两个圆角的半径直到它们可以刚好符合这个方形，所以半径就变成了50%。

border-radius是一种缩写方法。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。

https://segmentfault.com/a/1190000002780453