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标准。（下图右）