border-radius 的值超过宽高的计算公式

先来看一个现象，解释一下为何两者的圆角效果是一致的。

css 的代码如下：

.e1 {
  border-radius: 100% 100% 0 0 / 100% 0 0 0;
}

.e2 {
  border-radius: 50% 0 0 0 / 50% 0 0 0;
}

e2 好理解，水平和垂直的圆角都是 50px；但是 e1 怎么理解呢？这里就涉及到了当圆角半径超出盒宽高的计算公式了。

Let f = min(L_i / S_i), where i ∈ {top, right, bottom, left}, S_i is the sum of the two corresponding radii of the corners on side i, and L_top = L_bottom = the width of the box, and L_left = L_right = the height of the box. If f < 1, then all corner radii are reduced by multiplying them by f.

https://w3c.github.io/csswg-drafts/css-backgrounds/#corner-overlap

就是说圆角半径会取一个比值 f。f 来自四个角落，取其中最小的。拿上面的例子 f = 100 px / (100px + 100px) = 0.5，再用水平、垂直的圆角半径乘以了 0.5，那自然分别就是 50%，懂了啵。