直接改 .btn 类几乎必然失效，因为 Bootstrap 4 按钮依赖多层高特异性选择器（如 .btn.btn-primary:hover）和五种并列状态（默认、hover、focus、active、disabled），漏一即导致交互割裂；单类名权重不足且加载顺序、变量覆盖、深色模式等细节均需同步处理。
直接改 .btn 类几乎必然失效，因为 Bootstrap 4 的按钮样式靠多层高特异性选择器（如 .btn.btn-primary:hover）和状态链驱动，漏掉任一状态都会导致交互割裂。
为什么 .btn { border-radius: 6px; } 不生效
浏览器开发者工具里能看到这条规则被划掉——不是写错了，是 Bootstrap 4 原生用了更重的选择器，比如 a.btn、.btn.btn-primary:focus，甚至带属性选择器的 .btn[data-toggle]。单个类名 .btn 权重不够，压不住。
- 确保自定义 CSS 文件在 HTML 中
<link>标签里排在 Bootstrap CSS 之后 - 别只写
.btn，复制 Bootstrap 的原始结构：要改主按钮就用.btn.btn-primary，要改 outline 就用.btn.btn-outline-secondary - 如果项目用了 Webpack 或 CRA，检查是否误将 Bootstrap CSS 拆成多个
import，导致加载顺序不可控
必须成套覆盖的五种按钮状态
Bootstrap 4 按钮不是“一个样式+伪类”，而是五个独立且并列的视觉状态，缺一不可：
-
.btn.btn-primary—— 默认态（含背景、边框、文字色） -
.btn.btn-primary:hover—— 鼠标悬停（别只调 background，border-color 和 color 得同步变） -
.btn.btn-primary:focus—— 键盘聚焦（推荐用box-shadow替代outline，否则圆角对不齐） -
.btn.btn-primary:active—— 点击按下（通常比 hover 更深一层背景色） -
.btn.btn-primary:disabled—— 禁用态（必须设opacity或background-color，否则文字会糊在默认灰底上）
漏掉 :focus，键盘用户 tab 到按钮时会看到突兀的默认蓝边；漏掉 :disabled，禁用按钮文字可能变成白色，在浅灰背景上直接看不见。
立即学习“前端免费学习笔记（深入）”；
用 Sass 变量重定义是最干净的方案（如果你能编译）
Bootstrap 4 本身不支持 CSS 自定义属性，但它的 Sass 源码里所有按钮相关值都来自变量，改它们再重新编译，一劳永逸：
- 边框粗细由
$btn-border-width控制（默认1px） - 圆角统一由
$border-radius控制（影响按钮、表单、卡片等） - 主色系由
$primary、$secondary等变量决定，改了它们，.btn-primary和.alert-primary会同步更新 - 务必在
@import "bootstrap/scss/bootstrap"之前 覆盖这些变量，顺序错了就无效
注意：$border-radius 是全局变量，动它会影响所有组件；如果只要按钮变圆角，就得退回到纯 CSS 覆盖方案。
最易踩坑的三个细节
很多人调完以为好了，上线后才发现问题出在这些地方：
- 深色模式下没适配：如果页面支持
@media (prefers-color-scheme: dark)，.btn在暗背景上的文字对比度可能不足，尤其:disabled态容易看不清 - 响应式尺寸缩放没同步：改了
font-size却忘了调padding，小屏下按钮文字挤出边框 - 第三方插件干扰：某些轮播或模态框插件会动态插入带
.btn的 DOM，但没走你的自定义选择器路径，结果新按钮还是默认样式
真正可靠的覆盖，从来不是“写一条规则试试”，而是先看清它被谁定义、在哪生效、哪些状态共存——然后一次性把整条链拽出来重写。
