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

If I use a pixel or em value for border-radius, the edge radius is always a circular arc or a pill shape even 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 :

边界半径像素值:

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 :

边界半径的百分比值:

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值表示的边界半径相同?

1 个解决方案

#1

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: x is equivalent to border-radius:x/x;.

首先，您需要了解边界半径属性取2个值。这些值是半径为四分之一椭圆的X/Y轴上的半径，定义了拐角的形状。如果只设置其中一个值，那么第二个值就等于第一个值。所以边界半径x等于边界半径x/x。

Percentages values

Refering to the W3C specs : CSS Backgrounds and Borders Module Level 3 border-radius property this 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 :

所以这个特性:50%;这样定义椭圆的raddi:

• the radii on the X axis is 50% of the containers width
• X轴上的半径是容器宽度的50%
• the radii on the Y axis is 50% of the containers height
• Y轴上的半径是容器高度的50%

Pixel and other units

Using one value other 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, viewport相关单位，cm…)总是会产生一个X/Y半径相同的椭圆。换句话说，一个圆。

When you set border-radius:999px; the radii of the circle should be 999px. But another rule is applied when the curves overlap reducing 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:999 px;圆的半径应该是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×100px，边框半径:50%;相当于border - radius:115 px / 50 px;(双方各占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>