直接覆盖 .badge 类的 font-size 和 border-radius 即可，无需 !important；推荐用 rem 单位并确保 CSS 在 bootstrap.min.css 后加载；差异化圆角需用 .badge.bg-primary 等组合选择器；5.2+ 可通过 CSS 变量 --bs-badge-font-size 和 --bs-badge-border-radius 全局控制。
直接覆盖 .badge 类的 font-size 和 border-radius
Bootstrap 5 的徽章默认使用 font-size: 0.75em 和 border-radius: 0.375rem，但它们被定义在 .badge 基础类中，且带 !important 的可能性低（v5 默认不加），所以你只需在自定义 CSS 中后加载、同选择器权重即可覆盖。
常见错误是写成 .badge { font-size: 14px !important; }——其实不需要 !important，除非你把样式写在 Bootstrap 之前，或用了更弱的选择器（比如只写 span.badge）。
- 确保你的 CSS 文件在
bootstrap.min.css之后引入 - 用相同选择器：直接写
.badge，别套多余父级（除非你要局部控制） - 推荐用 rem 单位保持响应式一致性，例如
font-size: 0.875rem（对应 14px）、border-radius: 0.25rem
想为不同变体（如 bg-primary）设不同圆角？用组合选择器
Bootstrap 5 徽章常用变体（bg-primary、bg-success 等）本身不改变 border-radius，所有变体共享基础 .badge 样式。若需差异化，必须显式组合：
.badge.bg-primary {
border-radius: 0.125rem;
}
.badge.bg-danger {
border-radius: 0.5rem;
}
注意：.bg-* 类是独立添加的，不是嵌套关系，所以不能写成 .badge .bg-primary（中间有空格就错了）。
- 组合选择器权重更高，能安全覆盖基础
.badge - 避免对每个变体都重复写
font-size，统一在.badge里设好即可 - 如果用了
badge-pill（v4 遗留类），它已被移除，v5 中仅靠border-radius控制“药丸形”
内联样式 or style 属性会失效？因为优先级低于 CSS 文件
如果你在 HTML 中写 <span class="badge bg-info" style="border-radius: 5px;">New</span>，发现没生效，大概率是 Bootstrap 的 border-radius 值被后加载的自定义 CSS 覆盖了，而内联样式本应最高——但这里实际是：你写的 style 属性值可能被浏览器解析为无效（比如单位缺失），或你误用了 border-radius 的简写变体（如 border-radius: 5 缺少单位）。
- 内联样式有效，但必须合法：
style="border-radius: 5px;"或style="font-size: 12px;" - 不过不推荐用内联方式改徽章样式——破坏可维护性，且无法复用
- 真正容易踩的坑：用 SCSS 时忘了重新编译，或用了缓存未更新的 CSS 文件
用 CSS 变量实现主题化字体与圆角（Bootstrap 5.2+ 支持）
Bootstrap 5.2 起在 :root 中定义了 --bs-badge-font-size 和 --bs-badge-border-radius，你可以全局重置它们：
:root {
--bs-badge-font-size: 0.8125rem;
--bs-badge-border-radius: 0.25rem;
}
这个方式干净、集中，且所有 .badge 实例自动响应。但要注意：
- 仅适用于 Bootstrap 5.2 及以上版本；5.0/5.1 不含这些变量
- 变量值会被所有徽章继承，包括第三方组件中用到的
.badge - 如果项目同时用多个框架，确认没有其他样式重写了这些变量
最常被忽略的是版本检查——很多人复制了变量写法，却卡在 5.1 上怎么都不生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
