border-radius 50% 和100%

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

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

所以说，如果四个角都设置为50%或者以上，由于空间不足，所以空间会被平均分配，各角都一样，结果表现都为圆形。

 

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

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

所以只有两个值的话，左上角等于右下角，左下角等于右上角

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