如何在Bootstrap 5中通过CSS变量统一管理圆角Border-radius？

Bootstrap 5.3+ 圆角由语义化CSS变量控制：--bs-border-radius（基础类）、--bs-btn-border-radius（按钮）、--bs-input-border-radius（表单控件）、--bs-btn-close-border-radius（关闭图标）等，需确保变量在Bootstrap样式前加载且被对应组件引用。

Bootstrap 5.3+ 开始全面使用 CSS 自定义属性（如 --bs-border-radius）驱动圆角，但仅在 :root 中声明变量 ≠ 全局生效——漏掉任一组件的变量引用、拼错一个连字符、或加载顺序不对，都会导致部分元素“钉死”直角。

哪些 CSS 变量真正控制圆角？

Bootstrap 5.3+ 把圆角拆成语义化变量，不是所有组件都读同一个：

• --bs-border-radius：影响 .rounded 类和部分基础组件（如 .card），但不控制按钮或表单控件
• --bs-btn-border-radius：专用于所有 .btn 类，.btn-sm 和 .btn-lg 分别走 --bs-btn-border-radius-sm 和 --bs-btn-border-radius-lg
• --bs-input-border-radius：v5.3+ 新增，控制 .form-control 圆角（注意：此前版本是硬编码，改这个变量无效）
• --bs-border-radius-pill 和 --bs-border-radius-circle：分别用于 .rounded-pill 和 .rounded-circle，值固定为 50vh 和 50%，一般不建议覆盖

:root 中声明变量后为什么按钮/输入框还是直角？

常见失效原因不是变量没写，而是组件根本没引用它：

• 检查 DevTools 的 Computed 面板里 border-radius 是否显示为 var(--bs-btn-border-radius) —— 如果显示为具体像素值（如 0.375rem），说明该组件仍用旧版硬编码逻辑（比如你引入的是 CDN 上的 v5.2.3）
• .form-control 在 v5.3+ 才开始读 --bs-input-border-radius；v5.2 及更早版本只认 Sass 编译时的 $input-border-radius，CSS 变量对其完全无效
• 变量必须在 Bootstrap 样式表加载前注入 DOM，否则会被忽略。把 <style>:root { --bs-btn-border-radius: 8px; }</style> 放在 <link rel="stylesheet" href="bootstrap.min.css"> 后面，就等于白写

如何安全地覆盖并保持响应式？

直接在 :root 写死值能解决大部分场景，但要注意边界条件：

立即学习“前端免费学习笔记（深入）”；

• 响应式调整需配合 @media 重设变量，例如：

  @media (max-width: 768px) {  :root {    --bs-btn-border-radius: 4px;    --bs-input-border-radius: 4px;  }}

• 不要用 !important 覆盖变量值——变量本身不支持 !important，那是 CSS 属性的事
• 第三方组件（如 vue-bootstrap 或 react-bootstrap）可能绕过原生 CSS 变量，得查其文档是否透出类似 btn-border-radius 的 prop 控制
• Safari 对 calc() 中单位缺失极敏感：--bs-btn-border-radius: calc(var(--radius) * 1.2) 会失效，除非 --radius 带单位（如 6px）

最易被忽略的兼容性断点

变量方案看似干净，但几个细节会让它在真实项目中“局部失灵”：

• .input-group 里的 .form-control 默认左右圆角被父容器规则重置为 0，即使 --bs-input-border-radius 是 8px，也看不到效果——必须额外加 .input-group > .form-control { border-radius: var(--bs-input-border-radius); }
• .btn-close 使用独立变量 --bs-btn-close-border-radius，不继承 --bs-btn-border-radius，漏掉就会出现“其他按钮都圆了，关闭图标还是直角”
• 某些构建工具（如 Vite + CSS-in-JS）会将 :root 变量注入到 Shadow DOM 外部，而组件内部若在 Shadow Root 里用 var(--bs-btn-border-radius)，可能读不到——此时得在组件级 :host 或 ::slotted 中重复声明