用 rounded-pill 才能得到椭圆形按钮，它设 border-radius: 50rem 实现两端半圆、中间等宽的胶囊形；rounded 仅提供默认 0.25rem 的通用四角圆角，无法形成椭圆效果。
按钮加圆角用 rounded 还是 rounded-pill？
直接看效果：rounded 给按钮四角加轻微弧度（默认 0.25rem），适合卡片内嵌按钮或想保留矩形感的场景；rounded-pill 才是真椭圆——它设的是 border-radius: 50rem，视觉上就是两端半圆、中间等宽的“胶囊形”。别指望 rounded 能变椭圆，它只是通用圆角类，不是形状类。
常见错误：给 <button class="btn"> 加 rounded 却没看到明显变化——因为按钮默认是 inline-flex，高度不够时圆角会被压缩；确保按钮有内容或显式设 min-height / padding。
-
rounded安全用于所有按钮，包括btn-sm和btn-lg，圆角值统一受$border-radius控制 -
rounded-pill在小尺寸按钮（如btn-sm）上可能让文字被挤压，建议搭配text-nowrap和min-width: 4rem - 若按钮含图标（如
<i class="bi bi-plus"></i>），rounded-pill更易保持视觉平衡
为什么给 .btn-group 加 rounded-pill 没反应？
因为 .btn-group 是容器，真正渲染按钮的是子元素 .btn。Bootstrap 5 默认重置了 .btn-group > .btn:not(:first-child):not(:last-child) 的 border-radius 为 0，目的是让按钮无缝拼接。你给父容器加类，对子按钮无效。
正确做法是把 rounded-pill 加到每个 .btn 上，或者用更精准的工具类：
- 水平按钮组：用
.btn-group > .btn:first-child.rounded-start+.btn-group > .btn:last-child.rounded-end - 垂直按钮组（
.btn-group-vertical）：改用rounded-top和rounded-bottom，逻辑方向才对 - 若需统一控制，写 CSS：
.btn-group > .btn { border-radius: 50rem !important; }，但注意会破坏中间按钮的直角拼接
rounded-circle 能不能用在按钮上？
能，但不推荐。Bootstrap 的 rounded-circle 等价于 border-radius: 50%，它只在宽高完全相等时显示为正圆。而按钮天然有文字内容和行高，宽度常随文字伸缩，高度则由 padding 和 font-size 决定——很难稳定维持 1:1。
强行加 rounded-circle 后，常见现象是左右圆角大、上下小，看着像被压扁的椭圆。真正要做圆形按钮（比如悬浮操作按钮 FAB），应该：
- 显式设宽高：
style="width: 48px; height: 48px;" - 配合
rounded-circle和d-flex align-items-center justify-content-center居中文本 - 避免用
btn-sm/btn-lg混搭，它们会干扰尺寸一致性
自定义圆角大小时，!important 为什么绕不开？
因为 Bootstrap 5 的 .btn 规则里，border-radius 虽然没加 !important，但它和 border、box-shadow 等属性共用同一条高权重选择器（如 .btn.btn-primary）。如果你的自定义样式只写 .my-btn { border-radius: 8px; }，大概率被覆盖。
稳妥方案分两种：
- 全局改：在自定义 CSS 中写
.btn { border-radius: 8px !important; }，并确保它在 Bootstrap CSS 之后加载 - 局部改：用组合类名提高权重，比如
.btn.my-custom-round { border-radius: 12px; }，再给按钮加class="btn my-custom-round" - 注意：不要对
rounded-pill做像素级覆盖（如border-radius: 20px），它的50rem已足够大，再调数值无意义
真正容易被忽略的是按钮状态下的圆角——比如 :focus 或 :active 时，某些主题会额外加 outline 或重置 border-radius，得一并检查 computed styles。
