border-radius 属性

border-radius属性是为了将这四个属性border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom-left-radius 简写为一个属性。

border-radius: 1em 1em 1em 1em/5em 5em 5em 5em;（前面四个值指的是圆的水平半径，后面的四个值指的是圆的垂直半径）

/* 等价于： */

border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;

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

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

同样的，浏览器会对其他的圆角应用相同的计算，计算的结果是每个圆角的半径变成了50%，所以我们看到了一个原型。即使将border-radius设置为150px，浏览器还是会按照75px画圆角，75px是浏览器所允许的这个方形能够拥有的最大的圆角半径。

结论

如果所有圆角的半径都被设置成了100%，浏览器会根据图形的实际情况做一些计算，保证圆角能够刚好适应图形。不过我不确定将所有图形的 border-radius 设置成100%对性能会不会有影响。