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

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

提问by web-tiki

If I use a pixel or em valuefor border-radius, the edge radius is always a circular arcor a pill shapeeven if the value is greater than the largest side of the element.

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

When I use percentages, the edge radius is elliptic and starts at the middle of each side of the element resulting in an oval or ellipse shape:

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

Pixel value for border-radius :

border-radius 的像素值：

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>

Percent value for border-radius :

border-radius 的百分比值：

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>

Why doesn't border radius in percentages act the same way as border-radius set with pixel or em values?

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

回答by web-tiki

Border-radius :

边界半径：

First, you need to understand that the border-radius property takes 2 values. These values are the radii on the X/Y axis of a quarter ellipse defining the shape of the corner.
If only one of the values is set then the second value is equal to the first one. So border-radius: xis equivalent to border-radius:x/x;.

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

Percentages values

百分比值

Refering to the W3C specs : CSS Backgrounds and Borders Module Level 3 border-radius propertythis is what we can read concerning percentage values:

参考 W3C 规范：CSS 背景和边框模块级别 3 边框半径属性，这是我们可以阅读的有关百分比值的内容：

Percentages: Refer to corresponding dimension of the border box.

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

So border-radius:50%;defines the raddi of the ellipse this way :

因此border-radius:50%;，以这种方式定义椭圆的弧度：

• the radii on the X axisis 50% of the containers width
• the radii on the Y axisis 50% of the containers height

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

Pixel and other units

像素和其他单位

Using one valueother than a percentage for border radius (em, in, viewport related units, cm...) will always result in an ellipse with the same X/Y radii. In other words, a circle.

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

When you set border-radius:999px;the radii of the circle should be 999px. Butanother rule is applied when the curves overlapreducing the radii of the circle to half the size of the smallest side. So in your example it is equal to half the height of the element : 50px.

设置border-radius:999px;圆的半径时应为 999px。但是，当曲线重叠将圆的半径减小到最小边大小的一半时，将应用另一条规则。所以在你的例子中，它等于元素高度的一半：50px。

---

---

For this example (with a fixed size element) you can obtain the same result with both px and percentages. As the element is 230px x 100px, border-radius: 50%;is equivalent to border-radius:115px/50px;(50% of both sides) :

对于此示例（具有固定大小的元素），您可以使用 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>

回答by CyberJ

Just divide the first value by the % you want.. so if you want a border-radius of 50%, write:

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

border-radius: 25%/50%; 

or another example:

或另一个例子：

border-radius: 15%/30%;

You can easily do the math in js or SASS.

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

回答by Raven

Not an actual answer to the question but a usability advice for anyone that might stumble upon it:

不是问题的实际答案，而是对可能偶然发现它的任何人的可用性建议：

If you want to use a relative unit but don't want the elliptical behaviour of %you can always use emor rem. E.g. border-radius: 1em;

如果您想使用相对单位但不想出现椭圆行为，则%可以始终使用em或rem。例如border-radius: 1em;