直接改 border-radius 会破坏徽章尺寸逻辑、文字垂直居中和响应式表现；应使用官方 .rounded-pill 类，它通过 border-radius: 50rem 实现胶囊形且兼容布局、rtl 与断点。
直接改 border-radius 会破坏徽章的尺寸逻辑、文字垂直居中和响应式表现，不推荐。
为什么 border-radius 覆盖常常失效或出问题
Bootstrap 5 的 .badge 高度、内边距、字体大小全由 em 单位驱动，与父元素 font-size 强绑定。硬写 border-radius: 5px 或 border-radius: 50% 会导致：
- 在按钮内或小字号段落中，文字被圆角裁切（尤其
.badge-sm） - 与
.bg-primary等背景类组合时，padding 计算错位，背景色填充不匀 - 屏幕阅读器无法感知形状变化，而语义上你只是表达“计数”，不是“圆形”
- 不同断点下表现不一致：移动端圆角可能突然变大、消失，或左右不对称
正确做法：用 .rounded-pill，不是手写 border-radius
.rounded-pill 是 Bootstrap 5 唯一官方支持的胶囊形方案，它设的是 border-radius: 50rem，视觉等效于两端半圆、中间等宽的胶囊形，且：
- 不改变徽章垂直高度逻辑，仍依赖父元素
line-height，不会撑开布局 - 能自然贴合按钮圆角（如嵌入
<button class="btn">Messages <span class="badge bg-secondary rounded-pill">3</span></button>） - 是通用工具类，作用于任何行内元素，兼容 RTL 和响应式断点
- 不要混用
.rounded-pill和自定义border-radius—— 前者声明权重更高，后者会被覆盖
需要比 .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使用处，不是局部可控方案
真正容易被忽略的是：徽章形状不是纯视觉问题，而是和字体缩放、辅助技术、嵌套上下文强耦合的。哪怕只改一个像素的 border-radius，在 font-size: 0.875rem 的卡片标题里也可能让文字边缘发虚或被截掉。动手前先检查 computed styles 中的 line-height 和 padding 是否仍匹配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
