bg-gradient对按钮无效，因Bootstrap的.bg-gradient类仅适配普通容器，依赖background-color注入background-image；而.btn类用!important锁定纯色背景并覆盖所有状态，使渐变无法介入。
直接写 background: linear-gradient() 会失效，因为 Bootstrap 的 .btn 类用 !important 锁死了 background-color，且默认不处理 background-image 的渐变逻辑。
为什么 bg-gradient 对按钮无效
Bootstrap 的 bg-gradient 工具类只对普通容器（如 <div>）生效，它依赖 background-color 基础色注入 background-image；而 .btn 自身已通过 !important 固定了纯色背景，并覆盖了所有伪类状态（:hover、:active、:disabled），bg-gradient 根本没机会介入。
- 别在按钮上加
class="btn btn-primary bg-gradient"—— 纯色会盖掉渐变 - 也别用
style="background: linear-gradient()"行内写法 —— 会破坏:disabled等状态样式 -
bg-gradient-to-r这类方向类对按钮完全不起作用
正确写法：用 background-image + transparent
必须显式解除 Bootstrap 的背景锁定，再注入渐变，同时保留原有边框和文字颜色逻辑。
- 先设
background-color: transparent !important，否则渐变被纯色遮住 - 再用
background-image: linear-gradient(135deg, #0d6efd, #6f42c1) !important注入渐变 - 保留
border和color，例如border: 1px solid rgba(13, 110, 237, 0.3)，避免按钮“消失” - 务必单独定义
.btn-gradient:hover和.btn-gradient:active，否则悬停/点击时退成透明底
示例：
立即学习“前端免费学习笔记（深入）”；
.btn-gradient {
background-color: transparent !important;
background-image: linear-gradient(135deg, #0d6efd, #6f42c1) !important;
border: 1px solid rgba(13, 110, 237, 0.3);
}
.btn-gradient:hover {
background-image: linear-gradient(135deg, #0a58da, #5a37b8) !important;
}
.btn-gradient:active {
background-image: linear-gradient(135deg, #0845ad, #4a2ca1) !important;
}
移动端点击无反馈？补 -webkit-tap-highlight-color
iOS Safari 和部分安卓 WebView 对带 background-image 的按钮点击渲染有缺陷，不是你代码错了，是系统高亮层被遮住了。
- 加一句
-webkit-tap-highlight-color: rgba(0,0,0,0.1)，让点击时有半透灰反馈 - 别依赖
transition: background做渐变动画 —— Chrome/Firefox 不支持渐变插值，只会跳变 - 深色模式下文字对比度容易崩：深渐变配
text-white，浅渐变配text-dark，别靠肉眼判断
响应式渐变怎么切断点
Bootstrap 没提供 btn-gradient-md 这类断点类，所有预设渐变工具类都是全局生效的。
- 真要“只在 md 及以上显示渐变”，得用媒体查询手动控制：
@media (min-width: 768px) - 小屏下不声明
background-image，让按钮自然回退到background-color（比如搭配btn-primary） - 别在媒体查询里滥用
!important—— 只要选择器权重够（如.btn.btn-gradient-md），它天然比原生.btn高
最易被忽略的是：同一组渐变在 sm 屏上可能刚好够对比度，到了 xl 屏因字体相对变小、环境光变化，立刻变得难读。颜色和文字的协同适配，得实机测，不能只看设计稿。
