boder-radius属性
使用border-radius属性来设置圆角半径时可以使用长度值,或者百分比值。
在给它指定百分比值时,x轴和y轴分别相对于元素的宽度和高度来计算实际值。
所以,我们可以把一个正方形的元素变成圆形,只要把圆角半径设置成至少50%就好。
如果两个弧线相交,那么两个轴向就会分别缩小半径,直到圆弧不再相交。
可以像以下代码中所示,画出圆形和椭圆形。
<div class="round"></div> // 圆形
<div class="round oval"></div> // 椭圆形
.round {
width: 300px;
height: 300px;
border-radius: 50%;
background-color: #59f;
}
.oval {
width: 600px;
}
创建胶囊
因为圆角弧线为保证不相交会自动缩小半径,而在使用长度值(而非百分比值)时,半径并不相对于元素大小,最终会得到对称的效果。
因此,在创建胶囊两头的半圆形时,我们可以故意指定一个比所需半径大的值,来得到半圆形:
.obrund {
border-radius: 999em;
}
转载自:https://blog.csdn.net/qq_35536883/article/details/89355150