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

首先说明一下border-radius属性

border-radius属性可以使用百分比或者px类的长度值来实现，当使用百分比时，50%则可以让正方形变成圆形

button{
  border-radius:50%;//圆形
}
button{
  border-radius:5px;//使边角变圆润
}

 

胶囊样式

因为圆角弧线为保证不相交会自动缩小半径，而在使用长度值（而非百分比值）时，半径并不相对于元素大小，最终会得到对称的效果。

因此，在创建胶囊两头的半圆形时，我们可以故意指定一个比所需半径大的值，来得到半圆形：

button {
    border-radius: 999em;
}