CSS-Learning | 使用border-radius创建圆形和胶囊形状（长圆形）

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;
}