应使用 .rounded-pill 而非直接修改 border-radius；它设 border-radius: 50rem 实现胶囊形，兼容响应式、可访问性及嵌套场景，且不破坏徽章高度逻辑。
直接改 border-radius 会出问题
Bootstrap 5 的 .badge 默认是带轻微圆角的矩形（border-radius: 0.25rem），但它的尺寸、内边距、行高全由 em 单位驱动，和父元素字体大小强绑定。硬写 border-radius: 5px 或 border-radius: 50% 容易导致：
- 在按钮里或小字号段落中，文字被圆角裁切（尤其
.badge-sm） - 和
.bg-*类组合时，背景色填充不均匀（padding 计算错位） - 屏幕阅读器无法感知形状变化，而语义上你只是想表达“计数”，不是“圆形”
- 响应式场景下，不同断点表现不一致（比如移动端圆角突然变大或消失）
正确做法：用内置类 .rounded-pill，不是 .badge-pill
Bootstrap 5 已移除 .badge-pill，官方唯一支持的胶囊形徽章方案是组合使用 .badge + .rounded-pill：
<span class="badge bg-primary rounded-pill">5</span>
注意几个关键点：
-
.rounded-pill是通用工具类，作用于任何块级或行内元素，它设的是border-radius: 50rem，视觉上等效于胶囊形 - 不要混用
.rounded-pill和自定义border-radius—— 前者声明权重更高，后者会被覆盖 - 如果嵌入按钮，例如
，.rounded-pill能自然贴合按钮圆角 -
.rounded-pill不改变徽章垂直高度逻辑，仍依赖父元素line-height，所以不会撑开布局
需要比 .rounded-pill 更圆？别 hack 圆角，重写组件
Bootstrap 5 不提供中间档圆角类（比如“比默认圆一点，但不到胶囊程度”）。如果你的需求明确超出 .rounded-pill 的视觉范围：
- 不要用
border-radius: 1rem或border-radius: 8px覆盖 —— 这会导致上述裁切、可访问性、响应式问题复现 - 应新建一个自定义徽章组件，比如
.badge-soft-pill，完整控制padding、font-size、border-radius和line-height - 若项目用 Sass，可调整
$border-radius-pill变量并重新编译，但这会影响所有.rounded-pill使用处，不是局部可控方案 - 目前所有稳定版 Bootstrap 5.x（含 5.3.x）都只认
.rounded-pill；Bootstrap 6 尚未发布，但设计文档已预告将废弃该类，改用新机制
为什么 .rounded 类对 .badge 无效？
.rounded 是 Bootstrap 的基础圆角工具类，但它设的是 border-radius: 0.25rem —— 和 .badge 默认值完全一样。所以加了没变化，不是 bug，是设计使然。
真正起作用的是：
-
.rounded-pill→ 胶囊形（推荐用于数字计数） -
.rounded-0→ 显式直角（适合状态标签如 “Draft”、“Offline”） - 自定义类必须同时重置
padding和border-radius，否则文字紧贴边框
最常被忽略的是：徽章形状本质是信息密度决策，不是纯视觉偏好。数字计数用胶囊形是用户心智模型，强行改成其他圆角，反而降低可识别性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
