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