bootstrap 5 徽章仅支持矩形（默认）和胶囊形（.badge-pill），.badge-rounded 是误传；必须用 .badge-pill 实现胶囊形，因其同步调整 padding 和 line-height，确保文字垂直居中、响应式适配且无障碍友好。
Bootstrap 5 徽章形状只有两种合法选择：矩形或胶囊形
Bootstrap 5 官方只支持两种徽章形状逻辑：默认不加修饰是矩形（带轻微圆角），加 .badge-pill 是胶囊形。网上流传的 .badge-rounded 是误传，5.x 全系列从未定义该类，任何使用都会失效。
别被文档截图误导——有些旧版 Bootstrap 4 教程混入了 5 的搜索结果；也有部分第三方主题或自定义 CSS 添加了 .badge-rounded，但它不属于 Bootstrap 5 原生能力。
常见错误现象包括：
- 写了
.badge-rounded但圆角没变化，检查控制台是否报 class 未定义 - 用
.rounded-pill替代.badge-pill，结果徽章垂直居中偏移、文字贴边甚至裁切 - 在按钮内部嵌套徽章时，
.rounded-pill会覆盖按钮自身的圆角逻辑，造成视觉割裂
为什么不能直接写 border-radius: 50% 覆盖？
硬写 CSS 圆角看似简单，实际会破坏徽章的响应式行为和可访问性保障。原因在于：
-
.badge的内边距（padding）和字体大小都基于em单位，与父元素font-size强绑定；固定像素值的border-radius在不同上下文（如<h1></h1>里 vs<button></button>里）表现不一致 - 小屏幕下，
padding不足时，border-radius: 50%会让文字被圆角区域裁掉，尤其搭配text-xs或紧凑布局时 - 屏幕阅读器无法感知你写的
border-radius，而.badge-pill是语义化修饰类，框架内部做了无障碍适配 - 和
.bg-*类组合时，背景色填充可能因 padding 计算错位出现“露白边”或“色块溢出”
.badge-pill 和 .rounded-pill 到底该用哪个？
必须用 .badge-pill。这是 Bootstrap 5 唯一为徽章设计的胶囊形修饰类。它不只是改圆角，还同步调整了水平 padding 和行高对齐逻辑，确保文字始终垂直居中、不溢出。
.rounded-pill 是通用工具类，作用于任意元素（如 <div>、<code><span></span>），但它不理解徽章的尺寸缩放机制——徽章要随父元素字号自动缩放，而 .rounded-pill 只负责圆角，不管 padding 和 line-height。
实操建议：
- 徽章单独使用：写
<span class="badge bg-primary badge-pill">5</span> - 徽章嵌入按钮：仍用
.badge-pill，不要额外加.rounded-pill，否则按钮圆角和徽章圆角叠加导致弧度过大 - 想微调胶囊程度？只能重写整个徽章样式（比如自定义 SCSS 变量），不要局部 hack
border-radius
矩形 vs 胶囊形：不是审美选择，而是语义和场景强相关
选哪种形状，本质取决于你想传达的信息类型：
- 状态提示（如 “Draft”、“Online”、“Beta”）→ 用默认矩形：轻量、不抢眼，符合“辅助说明”的定位
- 数字计数（如通知数、购物车数量、未读消息）→ 必用
.badge-pill：用户直觉上把它当“可点击容器”，视觉饱满度提升操作意图 - 嵌入按钮或导航项时：
.badge-pill能自然匹配按钮的圆角节奏；矩形徽章会形成生硬直角拼接，降低整体一致性 - 未来兼容提醒：Bootstrap 6 已明确将废弃
.badge-pill，改用.badge-rounded+ 尺寸类组合。现在写死.badge-pill属于短期安全、中期需重构的方案
最易被忽略的一点：徽章形状变更必须同步检查所有嵌入场景——尤其是动态插入的徽章（如 JS 创建）、小屏折叠菜单里的徽章、以及配合 text-truncate 使用时的文字截断边界。
