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

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

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

pixel (px) border radius percent (%) 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?

86303

小开

最佳答案

边界-半径:

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

百分比值

参考 W3C 规范: 背景和边框模块3级边框-半径属性，我们可以读到关于百分比值的内容:

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

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

X 轴上的半径是集装箱宽度的50%
Y 轴上的半径是集装箱身高的50%

Border-radius in percentage (%) make an ellipsis

像素和其他单位

使用 一个值而不是边界半径的百分比(em，in，viewport 相关单位，cm...)将总是得到一个具有相同 X/Y 半径的椭圆。换句话说，一个圆.

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

Border-radius in pixels (px) make a pill shape

对于这个示例(使用固定大小的元素) ，可以同时使用 px 和百分比获得相同的结果。因为元素是 230px x 100px，所以 border-radius: 50%;等价于 border-radius:115px/50px;(两边的50%) :

.percent {
border-radius: 50%;
}
.pixels {
border-radius: 115px/50px;
}


/* For the demo : */
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;
text-align: center;
}

<div class="percent">border-radius:50%;</div>
<div class="pixels">border-radius:115px/50px;</div>