当我使用百分比时，边缘半径是椭圆形的，并从元素的每一边的中间开始，得到椭圆或椭圆形状：
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的百分比值：
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>
为什么边界半径在百分比中的作用方式与border-radius设置与像素值相同？
解决方法
首先，您需要了解border-radius属性需要2个值。这些值是定义角的形状的四分之一椭圆的X / Y轴上的半径。
如果只设置一个值，则第二个值等于第一个值。所以border-radius：x等价于border-radius：x / x ;.
百分比值
参考W3C规范：CSS Backgrounds and Borders Module Level 3 border-radius property这是我们可以读取关于百分比值：
Percentages: Refer to corresponding dimension of the border Box.
所以border-radius：50％;以这种方式定义椭圆的raddi：
> X轴上的半径是容器宽度的50％
> Y轴上的半径是容器高度的50％
像素等单位
使用除边界半径(em，in，视口相关单位，cm …)的百分比之外的一个值将始终产生具有相同X / Y半径的椭圆。换句话说，一个圆。
当你设置border-radius：999px;圆的半径应为999px。但是另一个rule is applied when the curves overlap将圆的半径减小到最小边的一半大小。所以在你的例子中，它等于元素的一半高度：50px。
对于此示例(使用固定大小的元素)，您可以获得与px和百分比相同的结果。因为元素为230px / 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>
