css transition对background-image（含linear-gradient）无效，因w3c规范将其列为不可动画属性；可靠方案是保持同一渐变、仅用background-position位移配合background-size扩大画布实现平滑流动效果。
直接写 background: linear-gradient() 能显示，但想加过渡动画或悬停变化，必须绕开 background-image 本身不可 transition 的限制——否则只会跳变、卡顿、移动端失灵。
为什么 hover 时渐变颜色“跳”而不是“滑”
浏览器不监听 background-image 的变化，所以即使写了 transition: background 0.3s，实际只是在两个不同渐变快照之间硬切。三色以上尤其明显，Safari 和旧版安卓 WebView 更容易白屏或闪退。
- 错误写法：
.btn:hover { background: linear-gradient(45deg, #ff6b6b, #4ecdc4); }—— 没有过渡过程 - 正确思路：保持同一个
linear-gradient()，只动background-position，靠background-size扩大画布 - 必须配
background-size: 200% 100%（水平流动）或300% 300%（多色循环），否则background-position移不动 - 初始位置建议设为
0% 50%，方便控制起止点
纯 CSS 实现悬停平滑反转的写法
适用于双色/三色对称渐变，视觉干净、兼容性好，Chrome/Firefox/Safari 15+ 全支持。
- 基础样式：
background: linear-gradient(90deg, #4A90E2, #9C5EDB); background-size: 200% 100%; transition: background-position 0.4s ease; - 悬停状态：
:hover { background-position: 100% 0; }—— 注意不是改颜色，是“拖动”渐变图层 - 别漏掉
border: none和border-radius，否则圆角会裁掉渐变边缘 - 文字颜色建议用
color: white或通过mix-blend-mode: difference动态适配（慎用，部分安卓机不支持）
移动端点不动 / 没反馈的三个硬伤
iOS Safari 和部分安卓 WebView 默认压制按钮原生点击态，不是你代码错，是交互层被锁了。
- 必须加
touch-action: manipulation到按钮上，否则触摸无响应 -
:active伪类要配视觉反馈，推荐transform: translateY(1px)或opacity: 0.85；别用scale()，某些安卓 WebView 重绘卡顿 - 检查父容器有没有
pointer-events: none，它会静默吞掉所有触摸事件 - 低端安卓机上加
will-change: background-position防掉帧（2026 年仍有效）
边框渐变怎么做
CSS 不支持 border: linear-gradient()，直接设会报错或忽略。所谓“渐变边框”，本质是把渐变限制在边框内侧区域。
- 关键组合：
background: linear-gradient(...); border: 2px solid transparent; background-clip: padding-box; - 不能用
border-box，否则渐变会填满整个按钮 - Safari 15.4 之前对
button元素的background-clip支持不稳定，稳妥做法是换成<div role="button"> 并手动处理键盘焦点 <li>如果需要真正镂空边框（如中间透明），得用伪元素 + <code>inset遮罩，但兼容性更差
最易被忽略的是 background-size 和 background-position 的数值匹配关系：方向角度、位移百分比、size 倍数三者必须对齐，差一点就会露底色或卡在半途。调试时先固定 background-position: 100% 50% 看是否完整移动，再加动画。
