微信浏览器（尤其ios版）不支持background-image: linear-gradient()在交互状态下的动态渲染，系webkit底层限制所致；应放弃:hover/:active渐变，改用静态渐变+边框、禁用!important、固定文字色、用transform/opacity做反馈，并通过ua检测加载纯色fallback。
微信浏览器（尤其是 iOS 版微信内置 WebView）不支持 background-image: linear-gradient() 在按钮等交互元素上的动态渲染，这不是你代码写错了，而是底层 WebKit 渲染限制导致的。
为什么渐变按钮在微信里看起来是纯色
微信 Android 和 iOS 内置浏览器基于旧版 Chromium 或 WebKit，对 background-image 在 :hover、:active 状态下的重绘支持极弱。即使你写了完整的 .btn-gradient:hover 规则，微信也大概率忽略它，直接 fallback 到 background-color —— 而 Bootstrap 默认用 !important 锁死这个值，导致渐变“消失”。
- 不是 CSS 没加载，是浏览器选择性丢弃了渐变声明
-
background: linear-gradient(...) !important在微信中常被解析为无效值，退回到最近有效的background-color - iOS 微信（WKWebView）对
background-image+!important的组合兼容性最差，Android 微信稍好但也不稳定
微信里能用的渐变按钮替代方案
放弃依赖状态伪类驱动渐变切换，改用静态但视觉可信的方案：
- 用
background: linear-gradient(135deg, #0d6efd, #6f42c1)+border: 1px solid rgba(13, 110, 237, 0.3)，不加!important，靠选择器权重压制 Bootstrap 原生规则（比如用.btn.btn-gradient） - 文字颜色固定为
text-white，禁用text-dark类——微信不渲染渐变时，深色文字在浅色 fallback 背景上会不可读 - 移除所有
:hover/:active渐变变化，只保留基础态；点击反馈改用transform: scale(0.98)或opacity: 0.9，这两者在微信中渲染稳定 - 如果必须有悬停感，可加
transition: opacity 0.15s ease，但别设transition: background，它在微信里无效且可能触发闪烁
真要保留渐变动画？微信里基本做不到
Chrome/Firefox 不支持 linear-gradient() 插值过渡，微信更不会支持。所谓“渐变动画”在微信里只会是跳变或完全静止。如果你看到别人实现了，大概率是：
- 用了 SVG 背景图代替 CSS 渐变（
background: url("data:image/svg+xml,...")），绕过渲染限制 - 把按钮做成
<canvas></canvas>绘制，完全脱离 CSS 背景机制 - 实际是背景容器渐变 + 按钮透明，靠层级错觉模拟——但这会破坏按钮点击区域和语义
最现实的做法：用微信环境检测（navigator.userAgent.includes("MicroMessenger")）加载一套纯色 fallback 样式，别硬撑渐变。真正难的不是写 CSS，是在不同 WebView 里判断「哪里该妥协」。
