渐变按钮悬停失效是因为background-image不可被transition监听，需用background-position和background-size配合实现平滑过渡，并添加touch-action: manipulation与:active反馈确保移动端交互可信。
直接用 background-image: linear-gradient() 就能做出时尚渐变按钮，但写错一个参数，颜色就“跳变”或悬停失效——关键不是换颜色，而是让浏览器知道该过渡什么。
为什么 background: linear-gradient() 悬停不动？
因为 background-image 本身不可被 transition 监听。你写 transition: background 0.3s，浏览器会忽略渐变部分，只过渡 background-color（如果有的话），结果就是颜色“啪”一下切换。
- 真正可过渡的是
background-position和background-size - 必须同时设置
background-size: 200% 200%（或更大），否则background-position移动无效 - 初始
background-position建议设为0% 50%，方便水平流动；对角渐变可用0% 0% - 渐变方向角度要和位移方向匹配：比如
linear-gradient(90deg, ...)对应background-position: 0% 50% → 100% 50%
移动端点下去没反馈？不是渐变的问题
iOS Safari 和部分安卓 WebView 默认禁用按钮原生点击态，哪怕 CSS 写得再漂亮，用户也会觉得“没反应”。这不是 bug，是浏览器策略。
- 必须加
touch-action: manipulation到按钮上（CSS 或内联style都行） -
:active伪类要配视觉反馈，推荐opacity: 0.8；避免用transform: scale()，某些安卓 WebView 会卡顿重绘 - 检查父容器或遮罩层是否用了
pointer-events: none，它会静默吞掉所有触摸事件
怎么做出平滑流动的渐变动画？
靠 @keyframes 控制 background-position 循环位移，本质是“拖动一张超大渐变图”，不是改颜色。
- 示例：
background-image: linear-gradient(90deg, #ff6b6b, #4ecdc4, #44b5b1, #ff6b6b) - 配
background-size: 400% 400%（4 色建议 ≥ 400%，否则边缘断层） - 动画用
background-position: 0% 50% → 100% 50% → 0% 50%实现无缝循环 - 移动端低端机上加
will-change: background-position防掉帧（慎用，别滥用）
最容易被忽略的是：渐变本身不负责交互反馈，touch-action 和 :active 才是让用户相信“我点到了”的关键。漏掉这两条，再炫的渐变也像摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
