应直接覆盖 .badge 的 border-radius 和 font-size，推荐使用 !important 确保生效；若仅局部修改，宜用自定义类如 .badge-smooth；响应式场景优先用 rem 或 px 控制字体大小，并同步调整 padding 与圆角比例。
直接覆盖 .badge 的 border-radius 和 font-size
Bootstrap 5 默认给 .badge 设了 border-radius: 0.375rem 和 font-size: 0.75em（小号文字），想改就得用更高优先级的 CSS 覆盖。别试图改 Bootstrap 源码或重编译，直接在项目样式表里加规则就行，但要注意选择器权重。
推荐写法：
.badge {
border-radius: 4px !important;
font-size: 0.875em !important;
}
加 !important 是因为 Bootstrap 用的是类选择器 + 属性内联（比如某些 JS 动态添加的 badge）可能触发更高优先级；若你确定只在静态 HTML 中使用，且没其他干扰样式，可先不加 !important，测试是否生效。
用自定义类名避免全局污染
如果你只想改某几个徽章，而不是所有 .badge，硬覆盖会破坏其他地方的视觉一致性。这时候应该加一个自定义类，比如 .badge-smooth 或 .badge-lg-text，再单独定义。
示例：
<span class="badge bg-primary badge-smooth">New</span>
.badge-smooth {
border-radius: 6px;
font-size: 0.9375em;
}
注意：这个类必须放在 Bootstrap CSS 之后加载，否则规则不生效；如果用了 Sass，也可以在 $badge-border-radius 和 $badge-font-size 变量处提前重定义，但前提是你是从源码构建的。
响应式文字大小要小心 em 和 rem 的继承链
Bootstrap 的 font-size: 0.75em 是相对于父元素计算的。如果你把 badge 放在 .h1 或 .fs-6 这类已设字体大小的容器里，em 值会层层叠加，导致实际字号失控。
更稳妥的做法是用 rem 或固定单位：
-
font-size: 0.875rem—— 相对于根元素（html），稳定可控 -
font-size: 12px—— 绝对值，适合精确控制，但牺牲缩放友好性
另外，Bootstrap 5 的 .badge 默认有 padding: 0.35em 0.65em，它也基于 em，所以改字体大小后，建议同步检查左右间距是否还协调——必要时一并调整 padding。
圆角过大时和边框/背景色的视觉冲突
把 border-radius 设到 1rem 甚至更高，容易让 badge 看起来像标签或气泡，尤其搭配 bg-dark 或 bg-light 时，边缘可能发虚或出现抗锯齿异常（尤其在 Windows Chrome 下）。
建议遵循两个原则：
- 圆角值不超过
font-size的 1.2 倍（例如字号 14px，圆角 ≤ 16px），保持比例协调 - 若用了
box-shadow，增大圆角后记得同步调大shadow的模糊半径，否则阴影会“卡住”在尖角处
真正难处理的是当 badge 和图标（如 <i class="bi bi-bell"></i>）组合使用时，图标的基线和 badge 的垂直居中会因圆角变化而偏移——这时得靠 vertical-align 或 transform: translateY() 微调，不是单改 CSS 类能解决的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
