bootstrap 5 中应通过修改 css 自定义属性 --bs-btn-border-radius 来调整按钮圆角，因其由按钮样式直接引用，避免 specificity 冲突和 !important 覆盖；需确保变量名准确、作用域正确且在按钮渲染前注入。
Bootstrap 5 中如何修改按钮圆角值
Bootstrap 5 默认用 CSS 自定义属性（--bs-btn-border-radius）控制按钮圆角，直接改这个变量最干净，不用覆盖 border-radius 声明，也避免 specificity 冲突。
-
--bs-btn-border-radius控制所有按钮（btn、btn-primary等）的默认圆角；--bs-btn-border-radius-sm和--bs-btn-border-radius-lg分别对应btn-sm和btn-lg - 在
:root或按钮父容器上设置即可生效，例如：:root { --bs-btn-border-radius: 12px; } - 若只改局部按钮，推荐加 wrapper 类并作用于该 scope：
.my-btn-group { --bs-btn-border-radius: 8px; }再让按钮嵌套其中
为什么改变量比写 border-radius 更可靠
Bootstrap 的按钮样式里，border-radius 是通过 var(--bs-btn-border-radius) 注入的，硬写 border-radius: 8px 很可能被后续的 !important 或更高优先级规则覆盖，尤其在使用 btn-outline-* 或主题切换时容易失效。
- 检查 DevTools 中按钮的 computed
border-radius，如果显示为var(--bs-btn-border-radius)，说明变量链正常；如果显示为具体像素值，说明变量已被覆盖或未生效 - Bootstrap 官方 SCSS 变量
$btn-border-radius只在编译时起作用，如果你没自己构建 CSS，改它无效 - 用变量方式支持响应式调整：可配合
@media动态重设--bs-btn-border-radius
自定义圆角在不同按钮类型下的表现差异
不是所有按钮都响应同一个变量 —— btn、btn-outline-*、btn-link 都读 --bs-btn-border-radius，但 btn-close 和 btn-group 内部按钮有独立逻辑。
-
btn-close使用--bs-btn-close-border-radius，需单独设置 -
btn-group中的按钮默认无左右圆角（防止相邻按钮圆角重叠），它会用--bs-btn-border-radius计算内部逻辑，但最终左右圆角被重置为0；如需保留，得额外覆盖.btn-group > .btn的border-start-radius/border-end-radius -
btn-lg按钮同时受--bs-btn-border-radius和--bs-btn-border-radius-lg影响，后者优先级更高
常见错误：改了变量但按钮还是直角
最常踩的坑是变量名拼错或作用域不对 —— Bootstrap 对变量名大小写和连字符极其敏感，且变量必须在按钮渲染前已注入 DOM。
- 写成
--bs-btn-borderRadius或--bs-button-border-radius都无效，正确名称是--bs-btn-border-radius - 在 JS 动态插入按钮后才注入 CSS 变量，会导致首批按钮读不到新值；应确保
:root或父元素的变量声明在中或早于按钮 HTML - 使用 Sass 编译时，若引入的是
bootstrap/scss/buttons而非完整bootstrap/scss/bootstrap，部分变量可能未被导入，导致自定义变量未被消费
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
