[CSS] 胶囊按钮与border-radius

胶囊按钮

高度固定

以前在写这种形状的按钮的时候，我一般是写了一个固定高度，然后border-radius设置为高度的一半：

.pill-button{
    width: auto;
    min-width: 128px;
    height: 48px;
    border-radius: 24px;
}

高度不固定

将border-radius设置为一个很大的数值就行了：

border-radius: 999999px;

相关原理参考文章：

1. border-radius你了解多少？ - 知乎 (zhihu.com)

2. 前端Tips3 - border-radius 原来可以这么玩 - 腾讯云开发者社区-腾讯云 (tencent.com)