Badge圆角变正方形的关键是将border-radius设为0，需用带!important的自定义class（如.badge-square）覆盖Bootstrap 5默认的0.375rem圆角，或通过CSS变量--bs-badge-border-radius动态控制；内联style无效因被!important规则覆盖。
Badge圆角变正方形的关键是覆盖border-radius
bootstrap的.badge默认带border-radius: 0.375rem（bootstrap 5），想变正方形，本质就是把圆角值设为0。但不能直接改源码，得用css覆盖——而且要注意选择器权重和生效时机。
- 优先用自定义class（如
.badge-square）写样式，避免污染全局.badge - 必须加
!important（Bootstrap 5中border-radius在.badge规则里带!important，不加就无效） - 如果用Sass编译项目，可在
$badge-border-radius变量处统一修改，但会影响所有Badge
直接在HTML里内联style为什么不行
内联style="border-radius: 0"会被Bootstrap的CSS覆盖，因为框架的.badge规则带!important，而内联样式权重虽高，但无法覆盖带!important的声明。必须用同等或更高权重的外部/内部CSS。
- 错误写法：
<span class="badge bg-primary" style="border-radius: 0">New</span> - 正确写法：定义
.badge-square { border-radius: 0 !important; }，再加class - 注意：Bootstrap 4中
border-radius没加!important，可省略!important，但版本混用时容易踩坑
用CSS变量动态控制圆角（Bootstrap 5.3+）
新版Bootstrap支持CSS变量，--bs-badge-border-radius可直接覆盖，无需!important，更干净。
- 单个Badge：
<span class="badge bg-primary" style="--bs-badge-border-radius: 0">New</span> - 批量控制：在父容器上设
style="--bs-badge-border-radius: 0"，其下所有Badge自动生效 - 兼容性注意：CSS变量在IE完全不支持，若需兼容IE，只能回退到class +
!important方案
为什么加了border-radius: 0还是有点弧度
常见原因是Badge内部文字撑开高度，导致上下边框视觉上仍有“微圆角感”，尤其字体较粗或行高较大时。这不是CSS没生效，而是渲染像素对齐问题。
- 检查是否真生效：用浏览器DevTools看computed样式里的
border-radius是否为0px - 微调方案：加
line-height: 1或padding: 0.35em 0.65em（Bootstrap默认值）确保尺寸严格匹配 - 极端情况：某些图标字体（如Font Awesome）自带内边距，需额外重置
font-size和vertical-align
实际项目里最稳的解法就两条：用CSS变量（现代项目），或写一个带!important的class（兼容老环境）。别去动node_modules里的Bootstrap CSS文件，下次升级就全丢了。
