border-radius 50% 和100%

根据 W3C border-radius 的规范定义，若是 border-radius 的值是百分比的话，就是相对于 border box 的宽度和高度的百分比。

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

因此说，若是四个角都设置为50%或者以上，因为空间不足，因此空间会被平均分配，各角都同样，结果表现都为圆形。

 

若是是border-radius: 50% 100% 这样呢？

首先看下border-radius每一个值的定义，每一个半径的四个值的顺序是：左上角，右上角，右下角，左下角。若是省略左下角，右上角是相同的。若是省略右下角，左上角是相同的。

因此只有两个值的话，左上角等于右下角，左下角等于右上角

这个时候，仍然应该是等比分配的，左上角和右下角 的圆弧弧度应该是 左下角和右上角 的一半，表现以下：