应优先使用 sass 变量重定义 $btn-border-width 和局部覆盖 .btn 的 border-width 与 border-radius；若仅调按钮样式，需用足够 specificity 的选择器（如 .btn）并加 !important，且确保自定义 css 在 bootstrap 后加载。
如何用 CSS 覆盖 Bootstrap 的 btn 边框和圆角样式
Bootstrap 默认按钮（如 btn-primary）的边框粗细是 1px，圆角是 0.25rem（即 4px）。直接修改需覆盖其 CSS 规则，而不是改源码或重写整个组件。
关键点：Bootstrap 的样式优先级高，必须用足够 specificity 的选择器，或加 !important（仅当必要时）。
- 推荐在自定义 CSS 文件中，放在 Bootstrap CSS 之后加载
- 不要修改
node_modules/bootstrap/下的源文件——升级时会被覆盖 - 若用 Sass，更稳妥的方式是重定义变量（见下一条）
用 Sass 变量提前控制 $border-radius 和 $btn-border-width
如果你项目已用 Bootstrap Sass（比如通过 @import "bootstrap/scss/functions"; 引入），最干净的方式是改变量再编译。
Bootstrap 5+ 中，按钮圆角由全局 $border-radius 控制，边框粗细由 $btn-border-width 决定。它们在 scss/_variables.scss 里声明，可提前覆盖：
$btn-border-width: 2px; $border-radius: 0.375rem; // 6px @import "bootstrap/scss/bootstrap";
注意：$border-radius 是全局变量，会影响所有带圆角的组件（如表单控件、卡片）。如果只想改按钮，应避免动它，而用下面的方式。
只改按钮、不影响其他组件的精准覆盖写法
要单独调整按钮的圆角和边框，又不波及其他元素，最安全的是写针对性规则：
- 用
.btn基础类选择器，确保覆盖所有按钮变体（btn-primary、btn-outline-secondary等） - 边框粗细用
border-width，别只改border—— 否则会丢失默认的border-color和border-style - 圆角用
border-radius，推荐写成border-radius: 6px !important;—— 因为 Bootstrap 的.btn规则里用了!important（v5.3.3 起），不加可能无效
示例：
.btn {
border-width: 2px !important;
border-radius: 6px !important;
}
如果只想改某一种按钮（比如只改 outline 按钮），就写 .btn-outline-primary；想排除禁用状态，加 :not(:disabled)。
为什么有时改了没生效？常见踩坑点
最常见的失效原因不是写错属性，而是 CSS 加载顺序或选择器权重不够：
- 你的 CSS 在 Bootstrap 之前加载 → 规则被覆盖 → 把自定义 CSS 放在
<link>最后，或@import在最后 - 用了
button.btn这种低权重选择器 → Bootstrap 用的是.btn.btn-primary，权重更高 → 改用.btn或.btn:not(.btn-sm)等更具体的选择器 - 用了
border: 2px solid #007bff→ 覆盖了颜色和样式，但可能破坏 outline 按钮的透明边框逻辑 → 应只设border-width，让颜色/样式继承原逻辑 - 在 Chrome DevTools 里看到样式被划掉，但没定位到来源 → 右键检查元素 → 看“Computed”面板里的
border-radius实际值，再回“Styles”找哪条规则赢了
真正麻烦的不是改样式本身，而是确认改的是哪个按钮实例、有没有被其他框架（比如 Vue 组件库）注入的样式干扰。先查 computed style，再逆推规则来源，比盲目加 !important 更可靠。
