Html 边界半径：50%与边界半径：999em

在探索Medium令人敬畏的标记时，发现了一种有趣的方法，可以使用border radius:999em制作漂亮的药丸样式的按钮。然而，这提出了一个问题：为什么边界半径：50%会变成椭圆形而不是药丸

下面是一个活生生的例子：

---

您有一个矩形div

在A中，边界半径将每个角环绕div宽度/高度的50%

---

在B中，border radius以相同的数量（999em，仅相对于字体大小）对每个角进行圆角。

border radius属性尽其所能保持总半径之间的相同比例，当您使用

border radius:999em

时，它保持最小角的相同比例

但是当您使用

边界半径：50%

时，它会将边界设置为整个对象的比例，假设x轴为对象宽度的50%，y轴为对象高度的50%，所有角组合在一起会使对象看起来像是圆形的

但要注意半径边框中的百分比，因为并非所有浏览器都广泛支持它，所以请检查并确认

注意：在Safari中，边界半径的百分比值仅在5.1+中受支持。在Opera中，仅在11.5+中支持

---

好的，它通过使用边界半径：50%来制作一个椭圆形，因为它从x和y方向计算元素的边界，即宽度和高度，宽度为120px，高度为60px，所以它的计算方式类似于x方向上的边界表示60px，y方向上的边界表示30px半径，通过组合来制作一个椭圆形

应用css

边框半径时：100px

它使

边框左上半径：100px；
边框右上角半径：100px；
边框右下半径：100px；
边框左下半径：100px

所以你得到了药丸的形状