边界半径：50％对边界半径：999em

Question

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

以下是一个实例：http://codepen.io/evergreenv/pen/ykpBA/

Answer 1

边界半径属性尽可能保持整体半径的相同比例，当你使用border-radius: 999em时，它保持与最小角落相同的比例。

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

请注意半径边框中的百分比，因为并非所有浏览器都广泛支持，请检查this link和this one。

  

注意：仅在5.1+中支持的border-radius的Safari百分比值。在Opera中，仅支持11.5 +。

Answer 2

你有一个矩形div。

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

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

Answer 3

好吧它使用border-radius: 50%制作一个椭圆形，因为它从x和y方向计算元素的边界，这意味着宽度和高度，你的宽度为120px，高度为60px，因此它计算得像这个边框一样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;

所以你得到药丸形状。