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

【问题标题】：Border-radius in percentage (%) and pixels (px) or em以百分比 (%) 和像素 (px) 或 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 值设置的边界半径不同？

【问题讨论】：

标签： css css-shapes

【解决方案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% 的边框半径，请写：

border-radius: 25%/50%;

或另一个例子：

border-radius: 15%/30%;

您可以轻松地在 js 或 SASS 中进行数学运算。

【讨论】：

不是只有25%的宽度和50%的高度吗？这与 X 和 Y 方向上 50% 的高度不同。
我不知道你一直在做什么样的数学，但这不仅仅是“数学”。这是一个特别定义的边界半径的简写，与算术除法完全无关。 w3.org/TR/css-backgrounds-3/#border-radius

【解决方案3】：

一种让它正确缩放到视口大小但在没有任何 js 的情况下保持圆形的方法是：

border-radius: 3vmin;

那么它总是会缩放到最小的尺寸，所以你永远不会有一个边是半圆形的盒子，你也不需要任何js来计算正确的百分比。

编辑：抱歉，忘记了 vmin 存在，所以改用它。

【讨论】：