边框半径,以百分比(%)和像素(px)或em为单位


124

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

当我使用百分比时,边缘半径为椭圆形,开始于元素各边的中间,从而形成椭圆形或椭圆形

像素(px)边框半径边界半径百分比

边框半径的像素值:

边界半径的百分比值:

为什么以百分比表示的边框半径与以像素或em值设置的边框半径不一样?

Answers:


181

边界半径:

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

百分比值

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

百分比:请参阅边框的相应尺寸。

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

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

边界半径(百分比)表示省略号

像素等单位

使用一个值比边界半径的百分比其他(EM中,视相关单位厘米...)总是会导致与相同的X / Y半径的椭圆。换句话说,一个圆

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

边框半径(以像素为单位)形成药丸形状


对于此示例(具有固定大小的元素),您可以使用px和百分比获得相同的结果。由于元素是230px x 100pxborder-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>


6
极好的答案。遗憾的是,分别为宽度和高度计算了百分比半径值。这意味着我无法在不知道对象的纵横比的情况下获得与对象大小成比例的圆角。如果将百分比应用于较大的对象尺寸,那不是很好吗?
克里斯·丹尼斯

4
@ChrisDennis事实并非如此。就像OP所说的那样,您可以简单地使用border-radius: 999px;。这样,您就可以获得圆角,并确保它们随元素缩放
Gust van de Wal

9
但是我可能不希望盒子有半圆形的末端。我希望能够将x半径指定为框的宽度的10%,并且y半径等于x半径。
克里斯·丹尼斯

4
嘿,您是否做了其他这样的自我回答?我很乐意阅读这些内容。
Ced

3
但是实际使用百分比的方法是:(border-radius: 50%/100%在Chrome 60 + 61中测试)
denns

6

只需将第一个值除以所需的百分比即可。如果您希望边界半径为50%,请输入:

border-radius: 25%/50%; 

或另一个例子:

border-radius: 15%/30%;

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


1
难道不是宽度的25%和高度的50%?这与X和Y方向上的高度的50%不同。
mpen

这到底是什么语法!有用!我不知道它的存在,很好!
乌里·库特纳

这只是数学兄弟
Cyber​​J

1
我不知道你在做什么样的数学运算,但这不只是“数学运算”。这是边界半径的专门定义的速记,与算术除法完全无关。w3.org/TR/css-backgrounds-3/#border-radius
MI Wright
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.