直接修改 border-radius 值是最简单有效的方式；bootstrap 5 默认按钮圆角由 --bs-btn-border-radius 变量控制（0.375rem），胶囊形需设为高度一半，推荐用 .btn-pill 类配合 --bs-btn-border-radius: 50rem，结合 btn-lg 使用，并注意 padding、overflow 和响应式适配。
直接修改 border-radius 值是最简单有效的方式
Bootstrap 5 默认按钮（如 btn-primary）的圆角来自 --bs-btn-border-radius CSS 变量，值为 0.375rem。要变成胶囊形（即左右完全圆滑、上下高度一致），需让水平方向圆角等于按钮高度的一半。
实操建议：
- 对单个按钮：直接加内联样式
style="border-radius: 50px;"（假设按钮高约 100px，实际应匹配height或line-height） - 更稳妥做法是重置变量：
.btn-pill { --bs-btn-border-radius: 50rem; }然后在按钮上加class="btn-pill" - 避免写死像素值——用
50rem而非999px，因为 rem 在缩放时更稳定，且 Bootstrap 内部也用类似逻辑处理全圆按钮
使用 btn-lg 配合 border-radius 才能真正呈现胶囊感
纯文字按钮即使设了大圆角，视觉上仍显“扁”，因为默认 btn 高度太小（约 2.5rem），左右圆弧撑不开。必须配合足够高度才能看出饱满胶囊轮廓。
常见组合：
-
class="btn btn-primary btn-lg"→ 高度升至约 3.5rem，此时--bs-btn-border-radius: 50rem才能自然形成左右半圆 - 若自定义高度（如
height: 48px），则对应设border-radius: 24px，否则左右圆角会“溢出”或不闭合 - 注意
padding：btn-lg自带较大上下 padding，若手动调height，需同步调整padding，否则文字会垂直偏移
警惕 overflow: hidden 和图标错位问题
当按钮内含图标（如 Font Awesome 的 <i class="fas fa-check"></i>），过大的 border-radius 可能裁剪图标边缘，尤其在 Safari 中更明显。
解决方法：
- 给按钮加
overflow: visible（默认是visible，但某些定制主题可能设为hidden） - 图标元素避免设固定
width/height，改用font-size控制大小，并确保父按钮有足够padding容纳图标外扩区域 - 测试真机：iOS Safari 对
border-radius渲染较保守，有时50rem会被截断为最大支持值，可降为24px或用max(50%, 24px)兜底
不要覆盖 .btn 原始类，而是用组合类名扩展
直接修改 .btn 的 border-radius 会影响所有按钮，破坏一致性。Bootstrap 设计本意就是靠类组合实现变体。
推荐写法：
- 定义新类
.btn-pill，仅负责形状，不碰背景色、边框、字体等其他属性 - 使用时写成
class="btn btn-primary btn-pill"，保持语义清晰且可叠加其他修饰类（如btn-sm、disabled） - 如果项目用 Sass，优先在变量层覆盖：
$btn-border-radius: 50rem;
但仅限全局统一需求，否则易污染其他组件
btn-lg 切到 btn-sm 时，border-radius 若没随高度同比例缩放，就会突然变“瘪”。这点容易被忽略，得靠媒体查询或 clamp() 动态控制。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
