以百分比（％）和像素（px）或em为边界半径

如果我使用边界半径的像素或em值 ，则即使边缘半径大于元素的最大边，边缘半径始终为圆弧或丸形 。

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

边界半径的像素值：

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> 

边界半径的百分比值：

 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> 

为什么百分比中的边界半径与像素值或em值设置的边界半径的作用方式相同？

Answer 1

边界半径：

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

百分比值

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

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

所以border-radius:50%; 用这种方法定义椭圆的弧度：

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

像素等单位

使用除边界半径（em，in，视口相关单位，cm …）以外的一个百分比值 ，将始终生成具有相同X / Y半径的椭圆。 换句话说，一个圆圈 。

当你设置border-radius:999px; 圆的半径应该是999px。 但是 当曲线重叠时将应用另一个规则 ，将圆的半径减小到最小侧的一半。 所以在你的例子中它等于元素高度的一半：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>