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%。