如果我使用一个像素或em值对于边界半径,边缘半径始终为圆弧 or a 药丸形状即使该值大于元素的最大边。
当我使用百分比,边缘半径是椭圆形的,并从元素每条边的中间开始,从而产生卵形或椭圆形 :
边框半径的像素值:
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>
为什么以百分比表示的边框半径与使用像素或 em 值设置的边框半径的作用不同?
边界半径:
首先,您需要了解 border-radius 属性有 2 个值。这些值是定义角的形状的四分之一椭圆的 X/Y 轴上的半径。
如果仅设置其中一个值,则第二个值等于第一个值。
So border-radius: x;
相当于border-radius: x/x;
.
百分比值
参考W3C规范:CSS 背景和边框模块第 3 级 border-radius 属性这是我们可以读到的有关百分比值的内容:
百分比:参考边框对应的尺寸。
So border-radius: 50%;
这样定义椭圆的半径:
- 上的半径X axis是容器的 50%width
- 上的半径Y axis是容器的 50%height
像素和其他单位
Using 一个值除了边界半径的百分比(em、in、视口相关单位、cm...)之外,将始终生成具有相同 X/Y 半径的椭圆。换句话说,一个圆.
当你设置border-radius: 999px;
圆的半径应为 999px。But其他当曲线重叠时应用规则将圆的半径减小到最小边尺寸的一半。因此,在您的示例中,它等于元素高度的一半:50px。
对于此示例(使用固定大小的元素),您可以使用 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)