Bootstrap 5 中徽章默认为矩形，添加 .badge-pill 类可变为胶囊形；.badge-rounded 是误传已移除，不可用；直接修改 border-radius 易导致响应异常、文字裁切及可访问性问题。
如何用 Bootstrap 5 控制徽章是方角还是圆角
bootstrap 5 的徽章默认是矩形（带小圆角），想改成更圆润的“胶囊形”，不能靠自定义 border-radius 覆盖，得用框架内置的修饰类。核心就两个：不加修饰是矩形，加 .badge-pill 是胶囊形——注意，.badge-rounded 是旧资料误传，bootstrap 5 官方已移除该类，实际有效且唯一支持的形状修饰符只有 .badge-pill。
- 矩形徽章（默认）：
<span class="badge bg-primary">5</span> - 胶囊形徽章（推荐用于计数场景）：
<span class="badge bg-primary badge-pill">5</span> -
.badge-pill会同时增大水平内边距和圆角半径，视觉上更饱满，但不会改变垂直高度逻辑——它仍依赖父元素行高，不是固定尺寸 - 别试图用
.rounded-pill或.rounded-circle覆盖，它们可能破坏徽章的垂直居中或导致文字溢出
为什么直接改 CSS 圆角容易出问题
徽章的尺寸、内边距、字体大小全由 em 单位驱动，和父元素 font-size 强关联。硬写 border-radius: 50% 或 2rem 会导致：
- 在不同字号上下文（如按钮里 vs 普通段落里）表现不一致
- 文字被裁切（尤其小屏幕下，
padding不足时） - 辅助技术（如屏幕阅读器）无法感知形状变化，而语义上你只是想表达“这是个计数”，不是“这是个圆形”
- 和
.bg-*颜色类组合时，背景色填充可能不均匀（因 padding 计算错位）
徽章形状和使用场景怎么匹配
选矩形还是胶囊形，本质是信息密度和交互意图的问题：
- 状态提示（如 “Draft”、“Online”）→ 用默认矩形，轻量、不抢眼
- 数字计数（如通知数、购物车数量）→ 必用
.badge-pill，视觉上更像“可点击的容器”，用户直觉更强 - 嵌入按钮时（
<button class="btn btn-outline-secondary">Messages <span class="badge bg-danger badge-pill">3</span></button>），.badge-pill能更好贴合按钮圆角，避免生硬直角拼接 - 如果需要更细粒度控制（比如比
.badge-pill更圆一点），应重写整个徽章组件，而不是局部 hack 圆角——因为 Bootstrap 5 已不再提供中间档形状类
兼容性和未来风险提醒
目前所有稳定版 Bootstrap 5.x（包括 5.3.x）都只认 .badge-pill。但要注意：
- Bootstrap 6 尚未发布，但设计文档已明确将废弃
.badge-pill，改用.badge-lg/.badge-sm+ 新的.badge-rounded（尚未实装）。所以现在写死.badge-pill属于短期安全、中期需适配的方案 - 如果你项目用了 Sass，可通过覆盖
$badge-pill-padding-x和$badge-pill-border-radius变量来统一调整，比全局 CSS 更可控 - 别忽略空徽章隐藏逻辑：
.badge:empty在 Bootstrap 5 中依然生效，但前提是徽章节点真为空——带空格或换行符都会让它“不空”，导致空白占位
