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

在使用border-radius时，发现有些人使用50%，有些人使用100%，都可以得到一个圆，那这两个值到底有什么区别呢：
border-radius的值是百分比的话，就相当于盒子的宽度和高度的百分比。
如一个50px 150px的方形，如果border-radius设置为100%，则等价于：

border-radius: 50px/150px;

而border-radius又是由border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius组成，所有上面border-radius：100%又等价于：

border-top-left-radius: 100%;
border-top-right-radius: 100%;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;

或

border-top-left-radius: 50px 150px;
border-top-right-radius: 50px 150px;
border-bottom-left-radius: 50px 150px;
border-bottom-right-radius: 50px 150px;

为什么border-radius设置成100%和50%都能画成圆呢，那是因为，在W3C中对重合曲线做了规定：如果两个相邻的半径和超过了对应的盒子的边的长度，那么浏览器要重新计算以保证它们不重合。
也就是说，如果相邻圆角的半径都设置成大于50%，那么浏览器会根据图形的实际情况做一些计算。
因此，为了避免不必要的计算，建议使用border-radius: 50%。

原文地址点这里