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

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

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

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


本文转载:CSDN博客