以百分比 (%) 和像素 (px) 或 em 表示的边框半径

Posted 2023-03-05

技术标签:

【中文标题】以百分比 (%) 和像素 (px) 或 em 表示的边框半径【英文标题】：Border-radius in percentage (%) and pixels (px) or em 【发布时间】：2015-07-10 01:59:13 【问题描述】：

如果我使用 pixel 或 em 值作为边框半径，则边缘半径始终是圆弧或 药丸形状如果该值大于元素的最大边。

当我使用 percentages 时，边缘半径是椭圆形的，从元素每条边的中间开始，形成椭圆形或椭圆形：

border-radius 的像素值：

div 
   background: teal;
   border-radius: 999px;
   width: 230px;
   height: 100px;
   padding: 40px 10px;
   box-sizing: border-box;
   font-family: courier;
   color: #fff;

&lt;div&gt;border-radius:999px;&lt;/div&gt;

边框半径的百分比值：

div 
  background: teal;
  border-radius: 50%;
  width: 230px;
  height: 100px;
  padding:40px 10px;
  box-sizing:border-box;
  font-family:courier;
  color:#fff;

&lt;div&gt;border-radius:50%;&lt;/div&gt;

为什么以百分比表示的边界半径与使用像素或 em 值设置的边界半径不同？

【问题讨论】：

【参考方案1】：

边框半径：

首先，您需要了解border-radius 属性有2 个值。这些值是定义角的形状的四分之一椭圆的 X/Y 轴上的半径。如果只设置了一个值，则第二个值等于第一个值。所以border-radius: x 等价于border-radius:x/x;。

百分比值

参考 W3C 规范：CSS Backgrounds and Borders Module Level 3 border-radius property 这是我们可以阅读的有关百分比值的内容：

百分比：参考边框对应的尺寸。

所以border-radius:50%; 以这种方式定义了椭圆的半径：

X 轴 上的半径是容器宽度的 50% Y 轴 上的半径是容器高度的 50%

像素和其他单位

使用一个值而不是边界半径的百分比（em、in、视口相关单位、cm...）将始终生成具有相同 X/Y 半径的椭圆。 换句话说，一个圆圈。

当你设置border-radius:999px;时，圆的半径应该是999px。但是另一个rule is applied when the curves overlap 将圆的半径减小到最小边的一半。所以在你的例子中它等于元素高度的一半：50px。

对于此示例（使用固定大小的元素），您可以使用 px 和百分比获得相同的结果。由于元素为230px x 100px，border-radius: 50%; 相当于border-radius:115px/50px;（两边各占50%）：

div 
  display: inline-block;
  background: teal;
  width: 230px;
  height: 100px;
  padding: 40px 10px;
  box-sizing: border-box;
  font-family: courier;
  font-size: 0.8em;
  color: #fff;

.percent 
  border-radius: 50%;

.pixels 
  border-radius: 115px/50px;

<div class="percent">border-radius:50%;</div>
<div class="pixels">border-radius:115px/50px;</div>

【讨论】：

优秀的答案。遗憾的是，百分比半径值是分别针对宽度和高度计算的。这意味着在不知道对象的纵横比的情况下，我无法获得随对象大小缩放的圆角。如果将百分比应用于较大的对象尺寸，那不是很好吗？ @ChrisDennis 这不是真的。就像 OP 说的，你可以简单地使用border-radius: 999px;。这样你就可以得到你的圆角，并确保它们与你的元素一起缩放但我可能不想要盒子的半圆形末端。我希望能够将 x 半径指定为框宽度的 10%，并且 y 半径等于 x 半径。嘿，你做过其他类似这样的自我回答帖子吗？我很感激阅读这些内容。但实际适用于百分比的是：border-radius: 50%/100%（在 Chrome 60 + 61 中测试）【参考方案2】：

只需将第一个值除以您想要的 %。所以如果您想要 50% 的边框半径，请写：