一般實現膠囊形狀按鈕的時候是將圓角半徑設置為高度一半，但是有時候高度是不確定的，可以將圓角半徑設置為一個很大的數值。

膠囊按鈕

高度固定

以前在寫這種形狀的按鈕的時候，我一般是寫了一個固定高度，然后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)