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 怎么理解呢?这里就涉及到了当圆角半径超出盒宽高的计算公式了。

继续阅读“border-radius 的值超过宽高的计算公式”