浅谈为什么border-radius设置成50%~100%都能画圆

CSS绘制一个圆，我们很容易想到把border-radius设置成50%，但是，事实上，把border-radius设置成50%~100%都能画圆。

W3C对于重合曲线有这样的规范：如果两个相邻的角的半径和超过了对应的盒子的边的长度，那么浏览器要重新计算保证它们不会重合。

如果border-radius设置成为80%，则两个相邻圆角合起来将是160%；如果border-radius设置成为100%，则两个相邻圆角合起来将是200%。

这两种情况都超过了对应的盒子的边的长度，浏览器会重新计算保证它们不会重合，同时缩放两个相邻圆角的半径直到它们可以刚好符合盒子，因此两个相邻圆角的半径就会变成50%。