如何通过CSS变量在Bootstrap 5中批量修改所有边框半径？-css教程-PHP中文网

直接修改 sass 变量 $border-radius 并在导入 bootstrap 前重定义才有效，css 变量 --bs-border-radius 仅影响 .rounded 等少数工具类，对 .btn、.card 等预编译组件无效。

如何通过css变量在bootstrap 5中批量修改所有边框半径？

直接改 `$border-radius` 变量，编译前生效

Bootstrap 5 的边框圆角由 Sass 变量 $border-radius 控制，它被用作所有组件（.btn、.card、.form-control 等）的默认值。想批量修改，必须在导入 Bootstrap 源码前重定义这个变量——仅靠 CSS 自定义属性（--bs-border-radius）无法覆盖全部场景，因为多数边框样式是编译时静态生成的。

常见错误是只在 HTML 中设置 :root { --bs-border-radius: .5rem; }，但这只影响少数动态计算的样式（比如部分工具类），对 .btn 这类预编译类完全无效。

确保你使用的是 Bootstrap 源码（bootstrap/scss/ 目录），不是已编译的 bootstrap.min.css
新建 _custom.scss，在 @import "bootstrap/scss/functions"; 之后、@import "bootstrap/scss/bootstrap"; 之前写：
```
$border-radius: 1rem;<br>$border-radius-sm: .25rem;<br>$border-radius-lg: 1.5rem;
```
如果你用的是 Bootstrap 官方 npm 包，需配置构建工具（如 Webpack + sass-loader）正确解析 @import 路径

`--bs-border-radius` 只能影响有限组件

Bootstrap 5 确实导出了 --bs-border-radius 等 CSS 变量，但它们主要服务于 .rounded 工具类和极少数 JS 驱动的组件（如 Tooltip 的 popper 配置）。像 .btn-primary、.card、.navbar 的圆角仍是硬编码的 border-radius: var(--bs-border-radius) 吗？不是——它们实际用的是编译后的固定值，例如 border-radius: .375rem。

检查 DevTools：展开 .btn 元素样式，看 border-radius 是否为具体数值（如 .375rem），而非 var(--bs-border-radius)
只有 .rounded、.rounded-0、.rounded-circle 这类工具类会读取 --bs-border-radius
若强行用 :root { --bs-border-radius: 0 !important; }，可能被其他更具体的规则覆盖，且不保证一致性

需要运行时动态切换？得自己补全逻辑

如果项目要求用户点击按钮实时切换圆角大小（比如“圆角开关”），光靠原生 Bootstrap 不够。你得手动扩展：用 JS 切换 :root 变量，并重写关键组件的规则，或给容器加 class 触发覆盖。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

先统一用 CSS 变量定义基础圆角：

:root {<br>  --my-border-radius: .5rem;<br>}<br>.theme-rounded .btn,<br>.theme-rounded .card,<br>.theme-rounded .form-control {<br>  border-radius: var(--my-border-radius);<br>}

避免污染全局 --bs- 命名空间，自定义前缀更安全
注意 button:focus、.btn:active 等伪类可能仍沿用原始值，需一并覆盖