Answers:
首先,您需要了解border-radius属性采用2个值。这些值是定义角的形状的四分之一椭圆的X / Y轴上的半径。
如果仅设置一个值,则第二个值等于第一个值。所以border-radius: x
等于border-radius:x/x;
。
参考W3C规范:CSS背景和边框模块3级border-radius属性,这是我们可以阅读的有关百分比值的内容:
百分比:请参阅边框的相应尺寸。
因此border-radius:50%;
,以这种方式定义椭圆的弧度:
使用一个值比边界半径的百分比其他(EM中,视相关单位厘米...)总是会导致与相同的X / Y半径的椭圆。换句话说,一个圆。
设置border-radius:999px;
圆的半径时,应为999px。但是,当曲线重叠时,将应用另一条规则,以将圆的半径减小到最小边的一半。因此,在您的示例中,它等于元素高度的一半:50像素。
对于此示例(具有固定大小的元素),您可以使用px和百分比获得相同的结果。由于元素是230px x 100px
,border-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>
border-radius: 999px;
。这样,您就可以获得圆角,并确保它们随元素缩放
border-radius: 50%/100%
在Chrome 60 + 61中测试)
只需将第一个值除以所需的百分比即可。如果您希望边界半径为50%,请输入:
border-radius: 25%/50%;
或另一个例子:
border-radius: 15%/30%;
您可以轻松地在js或SASS中进行数学运算。