直接加 bg-gradient 对按钮无效，因为 Bootstrap 的 bg-gradient 工具类仅适用于普通容器，而按钮（.btn）通过 !important 固定 background-color 且预设了多状态样式，导致渐变无法生效。
为什么直接加 bg-gradient 对按钮无效
因为 Bootstrap 的 bg-gradient 工具类只对普通容器（如 div）生效，它依赖 background-color 基础色来注入 background-image: linear-gradient()；而按钮（.btn）默认用 background-color + !important 实现背景，且内部还定义了 :hover、:active 等状态样式——bg-gradient 根本没机会介入。
.btn 上写 background-image: linear-gradient() 的正确姿势
必须显式覆盖按钮的背景逻辑，不能只改 background 简写，否则会清掉 Bootstrap 为 :disabled 或 :focus 预设的透明遮罩等细节。
- 先设
background-color: transparent !important，解除原生纯色锁定 - 再用
background-image: linear-gradient(135deg, #0d6efd, #6f42c1) !important注入渐变 - 保留原有边框逻辑：比如
border: 1px solid rgba(13, 110, 237, 0.3)，避免视觉断裂 - 务必单独定义
.btn-gradient:hover和.btn-gradient:active，否则悬停/点击时退回到透明底色
响应式渐变按钮怎么切断点
Bootstrap 没提供 btn-gradient-md 这类断点类——所有预设渐变工具类都是全局生效的。真要「只在 md 及以上显示渐变」，得靠媒体查询手动控制。
- 写 CSS 时用
@media (min-width: 768px)包裹background-image声明 - 小屏下不声明
background-image，让按钮自然回退到background-color（比如搭配btn-primary） - 别用
!important在媒体查询里——只要选择器权重够（比如.btn.btn-gradient-md），它天然比原生.btn高 - 如果项目用 Sass，可直接引用
$grid-breakpoints：@media (min-width: map-get($grid-breakpoints, md)) { ... }
移动端点击没反馈？这不是渐变的锅
iOS Safari 和部分安卓 WebView 对 background-image 在 :active 状态下的渲染有缺陷，不是你代码写错了。
- 必须显式写
.btn-gradient:active，哪怕只是复制 hover 渐变值 - 加
-webkit-tap-highlight-color: transparent防止点击时出现半透明蒙层盖住渐变 - 别依赖
transition: background做渐变动画——Chrome/Firefox 不支持渐变插值，只会跳变 - 文字对比度容易崩：浅渐变配
text-dark，深渐变配text-white，别信肉眼判断
sm 屏上可能刚好够对比度，到了 xl 屏因字体相对变小、环境光变化，立刻变得难读。这种问题没法靠 CSS 自动修复，只能手动调、反复测。 
