边界半径：50% 与边界半径：999em [重复]答案

【问题标题】：Border-radius: 50% vs. border-radius: 999em [duplicate]边界半径：50% 与边界半径：999em [重复]
【发布时间】：2014-04-30 00:20:01
【问题描述】：

在探索 Medium 的精彩标记时，发现了一种有趣的方法，可以使用border-radius:999em 制作漂亮的药丸样式按钮。然而这提出了一个问题：为什么border-radius:50% 是椭圆而不是药丸？

【问题讨论】：

标签： html css

【解决方案1】：

你有一个矩形 div。

在 A 中，border-radius 将 div 宽度/高度的 50% 的每个角四舍五入。

在 B 中，border-radius 以相同的量（999em，仅与字体大小相关）对每个角进行四舍五入。

【讨论】：

【解决方案2】：

边框半径属性尽其所能保持整体半径之间的相同比例，当您使用border-radius: 999em时，它保持最小角的相同比例。

但是当你使用border-radius: 50%时，它会将边框设置为整个对象的比例，假设x轴为50%的宽度，y轴为50%的高度，所有角的组合使它看起来好像对象是圆形的。

【讨论】：

【解决方案3】：

好的，它使用border-radius: 50% 制作一个椭圆，因为它从 x 和 y 方向计算元素的边界，这意味着宽度和高度，并且您的宽度为 120 像素，高度为 60 像素，因此它的计算类似于 x 方向上的边界表示 60px 和 y 上的 30px 半径，并通过组合它来制作一个椭圆形。

同时应用 css border-radius:100px 它使

border-top-left-radius: 100px; border-top-right-radius: 100px; border-bottom-right-radius: 100px; border-bottom-left-radius: 100px;

所以你得到药丸的形状。

【讨论】：