边框半径百分比（％）和像素（px） [英] Border-radius in percentage (%) and pixels (px)

问题描述

如果我对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> 

border-radius的百分比值： p>

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

 < div&半径：50％;< / div>  

边界半径的百分比与像素值的边界半径设置相同？

解决方案

边框半径：

首先，您需要了解border-radius属性需要2个值。这些值是定义角的形状的四分之一椭圆的X / Y轴上的半径。

如果只设置了一个值，则第二个值等于第一个值。因此 border-radius：x 相当于 border-radius：x / x; 。

百分比值

参考W3C规格：将圆的半径减小到最小边的一半大小。所以在你的例子中，它等于元素的一半高度：50px。

/ p>

---

对于此示例（使用固定大小的元素），您可以使用px和百分比获得相同的结果。因为元素 230px / 100px border-radius：50％; 等效于 border -radius：115px / 50px; （两侧50％）：

  div {display：inline-block;背景：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> -radius：115px / 50px;< / div>  

If I use a pixel 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 :

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 values?

解决方案

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;.

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:

Percentages: Refer to corresponding dimension of the border box.

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

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

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.

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.

---

For this example (with a fixed size element) you can obtain the same result with both px and percentages. As the element is 230px/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）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！