必须用 background-image 设置渐变并设 background-color: transparent，否则 Bootstrap 的 !important 背景色会遮盖渐变；所有交互态需单独定义 background-image，且 :active 和透明色为硬性前提。
直接写 background: linear-gradient() 无效，必须用 background-image 覆盖并设 background-color: transparent，否则 Bootstrap 的高优先级 background-color 会完全遮住渐变。
为什么 background 简写会失效
Bootstrap 5 的 .btn-primary 等类内部用了 background-color: #0d6efd !important，而 background: linear-gradient(...) 是简写属性，它会一并重置 background-image（比如禁用态的遮罩图层）和 background-color。但浏览器渲染时，background-color 仍会盖在 background-image 上层——除非你显式把它设为 transparent。
正确路径只有一条：background-image 负责渐变，background-color: transparent 腾出空间，其他如 border、color 保持原逻辑不被破坏。
- 别用
background简写，它清空了 Bootstrap 原有的background-image状态逻辑 -
background-color: transparent !important是硬性前提，不加就看不到渐变 - 方向推荐用角度（如
135deg），比to right兼容性更稳
怎么写 hover / active / disabled 状态
Bootstrap 默认的 :hover 只改 background-color，而你已把它设为 transparent，所以不手动定义，悬停时渐变就“消失”了——实际是没变化，视觉反馈丢失。
立即学习“前端免费学习笔记（深入）”；
所有交互态都得单独写 background-image，不能依赖继承。iOS Safari 和安卓 WebView 还可能跳过 :active，必须显式声明。
-
.btn-gradient:hover要配独立的background-image，颜色可加深或换向 -
.btn-gradient:active必须存在，值建议和:hover一致，避免点击瞬间跳变 -
.btn-gradient:disabled不仅要渐变，还得加opacity: 0.7或降对比度色值，否则文字难读 - Android Chrome 需补
-webkit-tap-highlight-color: transparent，防点击蒙层盖住渐变
如何避免和 Bootstrap 原生类冲突
直接给 <button class="btn btn-primary"> 加自定义样式大概率失败，因为 .btn-primary:hover 的选择器权重更高，且带 !important。最稳妥的方式是另起一个不与 .btn-* 同名的类，彻底绕开权重竞争。
- HTML 中用
class="btn btn-gradient"，不要写btn btn-primary btn-gradient - CSS 中只针对
.btn-gradient写规则，不依赖.btn的任何背景相关声明 - 保留
border和color的原始值，例如复制.btn的border-radius和padding，但别动background相关项 - 如果项目用了深色模式，渐变色值别写死，改用 CSS 变量，例如
background-image: linear-gradient(135deg, var(--grad-start), var(--grad-end))
响应式断点下渐变要不要启用
Bootstrap 5 的 bg-gradient-* 类不支持断点控制，md:bg-gradient 是 Tailwind 写法，这里无效。想“只在桌面端显示渐变”，必须用媒体查询手动开关 background-image。
小屏回退纯色不是可选项，而是必要设计：移动端屏幕小、亮度高，渐变容易降低文字可读性，且部分 WebView 渲染不稳定。
- 基础样式先写纯色背景，例如
.btn-gradient { background-color: #0d6efd; } - 再用
@media (min-width: 768px)覆盖background-image，方向和颜色按需调整 - 别用
d-none d-md-block包按钮来“隐藏渐变”，那是隐藏整个元素，不是关闭渐变 - 如果多个地方复用，建议封装成 SCSS mixin，用
@include media-breakpoint-up(md)自动注入断点
最易被忽略的是 :active 状态的显式声明和 background-color: transparent 的强制透明——这两点不落实，按钮在真机上一点就“变灰”或“没反应”，不是代码没生效，而是浏览器把渐变图层压到最底层了。
