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

Question

如果我使用 像素或 em 值 作为边界半径，边缘半径总是圆弧或 药丸形状 即使该值大于元素的最大边。

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

边界半径的像素值：

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

<div>border-radius:999px;</div>

边界半径的百分比值：

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

<div>border-radius:50%;</div>

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

Answer 1

边界半径：

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

百分比值

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

Percentages: Refer to corresponding dimension of the border box.

所以border-radius:50%;这样定义椭圆的半径:

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

像素和其他单位

使用一个值而不是边框半径的百分比（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>

Answer 2

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

border-radius: 25%/50%;

或另一个例子：

border-radius: 15%/30%;

您可以在 js 或 SASS 中轻松完成数学运算。

Answer 3

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

border-radius: 3vmin;

然后它将始终缩放到最小尺寸，因此您永远不会有半圆形边的盒子，并且您不需要任何 js 来计算正确的百分比。

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

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

Border-radius in percentage (%) and pixels (px) or em

css

css-shapes

边界半径：

百分比值

像素和其他单位