风格酷带您学习border-radius:50% 和 100% 的区别

border-radius:50% 和 100% 的区别

发现 border-radius:50% 和 border-radius:100% 的效果是相同的，有点困惑，于是去上网查询了一下两者的差别。

border-radius 的值如果为百分比，则为盒子的宽度与高度的比值。所以当值为 50% 的时候正好是直径为盒子长度的圆。那当 border-radius 为 100% 的时候，直径应该为两倍的边长，那为什么最终效果是和50%的时候的长度是一样的呢？

其实在 W3C 中，如果两个相邻角的半径之和超过了相应盒子边的长度，那么浏览器要重新计算，以保证两者不会重合。

假设有一个 100px 的盒子，若 border-top-left-radius:100%; 则盒子会变成一个半径为 100px 的 1/4圆。（如下图左）

这个时候，如果我们再给一个 border-top-right-radius:100%; 此时相邻的两个角的半径之和已经超过了盒子的长度，浏览器需要重新计算。计算的规则就是同时缩放两个圆角的半径，直至两个相邻角的半径和为盒子的长度。也就是说，当两个圆角的半径为 50% 的时候，圆角正好符合 W3C 标准。（下图右）