border-radius 50%和100%的区别

border-radius:150px/10px  表示水平方向的圆角半径为150px，垂直方向的半径为10px，如果只有一个参数，则水平和垂直方向的圆角半径是一样的。

是一个 150px x 150px 大小的方形，将它的四个角的半径都设置成 50%。根据 W3Cborder-radius 的规范定义，如果border-radius 的值是百分比的话，就是相对于 border box 的宽度和高度的百分比。在我们的例子中，盒子的宽高都是 150px，所以 50% 对应的就是 75px。

W3C 对于重合曲线有这样的规范：如果两个相邻的角的半径和超过了对应的盒子的边的长度，那么浏览器要重新计算保证它们不会重合。

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