首先说明一下border-radius属性
border-radius属性可以使用百分比或者px类的长度值来实现，当使用百分比时，50%则可以让正方形变成圆形
1 button{ 2 border-radius:50%;//圆形 3 } 4 button{ 5 border-radius:5px;//使边角变圆润 6 }
胶囊样式
因为圆角弧线为保证不相交会自动缩小半径，而在使用长度值（而非百分比值）时，半径并不相对于元素大小，最终会得到对称的效果。
因此，在创建胶囊两头的半圆形时，我们可以故意指定一个比所需半径大的值，来得到半圆形：
button { border-radius: 999em; }