.rounded-pill创建胶囊形按钮，需配合btn等基础类并确保元素有明确高度；.rounded-circle实现圆形需宽高等值，否则呈椭圆，二者不可共存。
rounded-pill 是胶囊形，不是圆角矩形
它本质是 border-radius: 50rem，不是 50%，所以不会随宽高缩放变形。只要按钮有明确高度（比如 btn btn-primary），两端就一定是半圆，中间是直边——这才是“药丸”的正确形态。
常见错误是把它和 rounded-circle 混用，或单独加在非按钮元素上（比如 div）：没有 display: inline-block 或尺寸约束时，50rem 可能溢出不可见；而加在纯文本 span 上，因无盒模型尺寸，也看不出效果。
- 必须配合基础类使用，如
btn、btn-outline-secondary - 文字过长时建议加
text-nowrap，避免折行破坏胶囊形状 - 在
btn-group中使用，需注意:first-child和:last-child的圆角继承逻辑，可能需额外覆盖border-top-left-radius等单边属性
rounded-circle 是 50%，只对正方形生效
rounded-circle 等价于 border-radius: 50%，它不关心内容，只按当前元素的宽高比例算弧度。一张 400×300 的图加这个类，结果是椭圆；只有宽高等值（如 width: 100px; height: 100px;）才能出正圆。
实际项目中更推荐用容器裁剪法：<div class="rounded-circle overflow-hidden"><img class="w-100 h-100" src="..."></div>。这样既规避原图比例问题，又避免 object-fit: cover 在 IE11 下与 overflow-hidden 冲突。
- 不要直接给
img加rounded-circle后再设max-width: 100%——Bootstrap 5 已禁用该规则对它的影响，但自定义样式可能意外触发拉伸 - 若用在头像组件中，优先控制父容器尺寸，而非依赖图片原始分辨率
-
rounded-circle和rounded-pill不能共存：后者声明在后会覆盖前者，因为两者都是单类名、同权重
为什么加了类却没看到圆角？
最常被忽略的是元素本身没形成可渲染的盒模型。比如给一个空 span 加 rounded-pill，它默认是 display: inline，没有宽高，border-radius 就无从体现。
另一个高频原因是 CSS 权重冲突。例如在 input-group 中，.input-group > *:first-child 的选择器权重高于你写的 input.rounded-pill，导致圆角被覆盖。
- 用浏览器 DevTools 查看 computed 样式，确认
border-radius值是否被 override - 检查目标元素是否设置了
display（如inline-block、block）和尺寸（width/height或min-width） - 在
input-group场景下，要同时处理:first-child和:last-child的圆角，否则会出现一边圆、一边方
想精细控制圆角大小怎么办？
Bootstrap 5 已移除 rounded-0～rounded-3 这类数字分级类，rounded 默认是 0.25rem，rounded-pill 和 rounded-circle 是语义化固定值，无法微调。
真需要像素级控制（比如 6px、12px），只能绕过工具类：
- 内联样式：
style="border-radius: 6px"（适合单点调试或动态生成） - 自定义类：
.rounded-6 { border-radius: 6px !important; }（推荐用于项目复用，但注意!important会压制rounded-pill） - 改 Sass 变量：
$border-radius: 6px（全局生效，影响所有rounded、btn、card等）
别试图用多个工具类叠加（如 rounded rounded-pill），CSS 层叠规则会让后写的完全覆盖前写的，不会“累加”效果。
