Bootstrap 5 中直接使用 .rounded-pill 类即可实现椭圆形按钮，需配合 btn 基础类（如 btn btn-primary），其内部采用 border-radius: 50rem 确保两端恒为半圆，适配所有尺寸且响应式可靠。
Bootstrap 按钮怎么用 .rounded-pill 实现椭圆形？
直接结论：bootstrap 5 原生支持椭圆形按钮，核心就是加 .rounded-pill 类 —— 它不是“圆角矩形”，而是专为药丸状（即两端半圆、中间等宽）设计的语义化类，比手动写 border-radius: 50px 更可靠。
常见错误是误用 .rounded-circle（强制全图/全按钮变正圆，会压扁宽按钮）或 .rounded（只给普通圆角，不够“椭”）。而 .rounded-pill 内部用的是 border-radius: 50rem，足够大，能确保任意宽高比下两端都撑成半圆。
- 必须配合按钮基础类使用，比如
btn btn-primary，单独加.rounded-pill无效 - 如果按钮文字太长导致宽度远大于高度，
.rounded-pill依然生效，两端仍是半圆，中间是直边 —— 这正是“药丸”本意 - 不要和
.btn-block或width: 100%混用，否则可能在小屏上触发意外换行，破坏椭圆形态
为什么不用自定义 border-radius？
手动写 style="border-radius: 20px" 看似简单，但实际容易翻车：
- 20px 在高按钮上显得圆角不足，在矮按钮上又可能溢出（比如高度仅 24px 时，
border-radius: 20px会导致上下边被裁掉） - 响应式失效：PC 上看着好，手机横屏时按钮高度变化，固定像素值就失配
- 和 Bootstrap 主题脱节：深色模式切换、按钮尺寸类（
.btn-lg/.btn-sm）不会自动适配你的硬编码值
.rounded-pill 是 Bootstrap 内置的响应式方案 —— 它不依赖具体像素，靠极大 rem 值兜底，适配所有标准按钮尺寸。
遇到按钮还是方的？检查这三点
加了 .rounded-pill 却没效果，大概率是以下原因：
- 忘记加
.btn基础类（Bootstrap 5 不再默认给<button>基础样式，必须显式声明） - CSS 覆盖：项目里有全局重置如
button { border-radius: 0 !important; }，会干掉.rounded-pill - 用了
<a class="btn">但没设display: inline-block或类似行为（极少见，但旧版兼容层可能影响）
快速验证：打开浏览器开发者工具，看元素 computed 样式中 border-radius 是否为 50rem，如果不是，说明被覆盖了。
想微调椭圆“胖瘦”程度？别改类，改按钮本身
.rounded-pill 本身不可配置粗细 —— 它的设计哲学是“统一视觉节奏”。真要更“扁”或更“厚”，应该调整按钮的 height 和 padding：
- 要更扁平（像胶囊）：用
.btn-sm+.rounded-pill，或手动减padding-top/padding-bottom - 要更饱满（像水滴）：用
.btn-lg+.rounded-pill，或增padding让高度拉大 - 切忌用
border-radius: 100px替代——它在不同尺寸下表现不一致，且破坏框架语义
真正难处理的其实是图标按钮（比如带 + 的圆形操作按钮），那种场景 .rounded-pill 会显得过长，这时才该切到 .rounded-circle 并严格控制宽高比。椭圆 ≠ 万能，它只在“文本按钮需柔和收边”时最自然。
