以百分比 (%) 和像素 (px) 或 em 表示的边框半径 [英] Border-radius in percentage (%) and pixels (px) or em

问题描述

如果我使用像素或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.

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

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 :

border-radius 的像素值:

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>

border-radius 的百分比值:

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>

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

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

推荐答案

Border-radius :

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

参考 W3C 规范:CSS 背景和边框模块级别 3border-radius 属性 这是我们可以阅读的关于百分比值的内容:

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

百分比:参考边框框对应的尺寸.

Percentages: Refer to corresponding dimension of the border box.

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

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

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

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

使用一个值而不是边框​​半径的百分比(em、in、视口相关单位、cm...)将始终导致具有相同 X/Y 半径的椭圆.换句话说，就是一个圆.

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.

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

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.

对于此示例(具有固定大小的元素)，您可以使用 px 和百分比获得相同的结果.由于元素是 230px x 100px，border-radius: 50%; 等价于 border-radius:115px/50px; (50%双方):

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) :

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>

这篇关于以百分比 (%) 和像素 (px) 或 em 表示的边框半径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！