Bootstrap 5 的 .badge 圆角由 CSS 变量 --bs-badge-border-radius 控制，默认值为 0.25rem，且其 border-radius 声明带 !important；变正方形需用 .badge-square { border-radius: 0 !important } 覆盖，内联样式无效；胶囊形应使用 .rounded-pill 而非已移除的 .badge-pill。
Bootstrap 5 的 .badge 圆角由什么控制？
Bootstrap 5 中，.badge 的圆角由 CSS 变量 --bs-badge-border-radius 控制，默认值是 0.25rem（不是旧版的 0.375rem）。这个变量被用在 .badge 规则的 border-radius 声明里，且带 !important ——这意味着直接写 border-radius: 0 的普通样式不会生效。
想变正方形：必须用 !important 覆盖
要让徽章变成直角正方形，不能只加 rounded-0（它只作用于部分元素，对 .badge 无效），得自己写类并带上 !important：
.badge-square {
border-radius: 0 !important;
}
使用时：<span class="badge bg-primary badge-square">New</span>
- 不加
!important→ 样式被 Bootstrap 默认规则压制，毫无反应 - 避免用内联
style="border-radius: 0"→ 同样被!important拦截，无效 - 如果项目用 Sass，可提前重设变量：
$badge-border-radius: 0，但会影响所有.badge
想变胶囊形：别用 .badge-pill，改用 .rounded-pill
Bootstrap 5 已移除 .badge-pill 类。现在胶囊形唯一可靠方式是叠加 .rounded-pill：
立即学习“前端免费学习笔记（深入）”；
<span class="badge bg-success rounded-pill">5</span>
-
.rounded-pill内置border-radius: 9999px，视觉上等效于半椭圆 - 它会自动增大左右
padding，所以文字不贴边，这是设计行为，不是 bug - 单独写
border-radius: 50%或999px容易出问题：在小字号父容器里，可能因高度不足导致圆角“压扁”，甚至顶部/底部显示为直线 - 确保徽章内容单行：加
white-space: nowrap防止折行破坏圆角包裹效果
自定义圆角大小时，为什么光改 border-radius 不够？
徽章的视觉协调依赖三者联动：font-size、padding、border-radius。只调其中一个，容易出现文字偏上、左右挤、圆角比例失调等问题。
- 比如把
border-radius改成0.5rem，但padding还是默认的0.35em 0.65em→ 徽章上下空隙太小，圆角“顶”到文字 - 推荐同步调整：
font-size: 0.875em+padding: 0.4em 0.8em+border-radius: 0.25rem（约等于 font-size 的 1/3） - 若用 CSS 变量覆盖，优先改
--bs-badge-font-size、--bs-badge-padding-y、--bs-badge-padding-x和--bs-badge-border-radius，保持比例关系
最易忽略的是：徽章嵌入按钮或标题时，父级 font-size 一变，所有这些值都会缩放——调试时得连同父容器一起看，不能只盯着 .badge 自身。
