如何调整Bootstrap按钮的圆角弧度_修改CSS border-radius变量-css教程-PHP中文网

必须用--bs-btn-border-radius而非直接写border-radius，因bootstrap 5按钮的border-radius由该css变量注入，硬写易被.btn-primary:focus等高优先级规则或!important覆盖，且btn-close、btn-group等有独立变量或逻辑。

如何调整bootstrap按钮的圆角弧度_修改css border-radius变量

直接改 border-radius 很可能失效，必须用 --bs-btn-border-radius 这个 CSS 自定义属性才可靠。

为什么改 `border-radius` 不起作用？

Bootstrap 5 的按钮样式里，border-radius 是通过 var(--bs-btn-border-radius) 注入的，不是硬编码值。你写 .btn { border-radius: 8px; }，很容易被后续规则（比如 .btn-primary:focus 或主题切换时的 !important）覆盖。DevTools 里看到 computed border-radius 是具体像素值，说明变量链已经断了；如果显示的是 var(--bs-btn-border-radius)，才代表变量路径通畅。

拼错变量名是最常见问题：写成 --bs-btn-borderRadius（少连字符）或 --bs-button-border-radius（命名错误）都不生效
变量必须在按钮渲染前注入 DOM —— 把 :root 样式放在 <link rel="stylesheet"> 之后加载，就晚了
btn-close 和 btn-group 内部按钮不走这个变量，它们各自有 --bs-btn-close-border-radius 和逻辑重置

怎么正确设置 `--bs-btn-border-radius`？

最干净的方式是作用于 :root，全局生效：

:root {
  --bs-btn-border-radius: 12px;
  --bs-btn-border-radius-sm: 6px;
  --bs-btn-border-radius-lg: 16px;
}

注意：--bs-btn-border-radius-lg 优先级高于 --bs-btn-border-radius，所以 btn-lg 按钮会自动取前者值；btn-sm 同理。如果只改基础变量，btn-lg 仍保持默认圆角。

VPS Bootstrap

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

下载

局部修改更推荐加 wrapper 类：.my-toolbar { --bs-btn-border-radius: 8px; }，再把按钮包在里面
响应式支持直接套 @media：@media (max-width: 768px) { :root { --bs-btn-border-radius: 6px; } }
不要在 HTML 里内联 style 改这个变量 —— 无法复用、难维护、不响应式

`btn-group` 里的按钮圆角为什么还是直的？

因为 Bootstrap 默认对 .btn-group > .btn 做了左右圆角归零处理（防止相邻按钮视觉重叠），即使你设了 --bs-btn-border-radius，它也会被后续规则覆盖掉左右值。

必须额外覆盖：.btn-group > .btn { border-start-radius: 12px !important; border-end-radius: 12px !important; }
首尾按钮单独强化外侧圆角：.btn-group > .btn:first-child { border-start-start-radius: 12px; border-end-start-radius: 12px; }
中间按钮要显式重置水平圆角为 0，否则拼接处会露白边：.btn-group > .btn:not(:first-child):not(:last-child) { border-start-radius: 0; border-end-radius: 0; }

用 Sass 变量改和用 CSS 变量改，哪个更稳？

如果你能自己编译 Bootstrap（比如 Webpack/Vite + bootstrap/scss），改 Sass 变量 $btn-border-radius 是最底层、最彻底的方式。但注意：$btn-border-radius 只影响按钮，不会联动 $border-radius（卡片、表单等用的另一个变量），且 CDN 引入的 CSS 完全不认这个变量。

CDN 用户别碰 Sass —— 改了也没用，$btn-border-radius 在编译时就被转成 CSS 变量或像素值了
SCSS 项目里，必须在 @import "bootstrap/scss/variables" 之前覆盖变量，顺序错了等于白改
--bs-btn-border-radius 是运行时变量，支持 JS 动态修改（比如主题切换），Sass 变量做不到这点

真正容易被忽略的是：不同按钮类型读的变量不一样，btn-outline-*、btn-link 都响应 --bs-btn-border-radius，但 btn-close 必须单独设 --bs-btn-close-border-radius；而 rounded-pill 这类工具类完全绕过变量，直接写死 border-radius: 50rem —— 它和变量体系是两套逻辑。