用 background-position 移动放大渐变图实现平滑流动动画，需同步设置 background-size（如 200% 100% 或 300% 300%），配合明确坐标位移、匹配渐变方向，并在移动端添加 touch-action: manipulation 和 :active 反馈。
直接用 background-image: linear-gradient() 就能做出渐变按钮，但写错一个参数——比如漏 background-size、误用 transition: background、或在移动端没加 touch-action——按钮就会不动、跳变、点不反馈，甚至在 Safari 里彻底消失。
为什么 background: linear-gradient() 悬停时不过渡
因为 background-image 是不可动画属性，浏览器会静默忽略对它的 transition 或 @keyframes 声明。你看到的“跳变”，其实是 fallback 到单色背景再硬切。
- 正确路径是：靠
background-position移动一张“放大了的渐变图”，视觉上就是颜色在流动 - 必须同步设
background-size: 200% 100%（水平流动）或300% 300%（多色循环），否则位移无效 - 悬停时别只写
background-position: right—— 浏览器解析不一致，要写明确值，比如100% 50% - 渐变方向和位移方向得匹配：
linear-gradient(90deg, ...)对应0% 50% → 100% 50%；135deg建议双轴移动0% 0% → 100% 100%
button 上怎么实现平滑流动动画（非 hover 触发）
用 @keyframes 控制 background-position 循环位移，是最稳的纯 CSS 流动方案，兼容 Chrome 26+、Firefox 16+、Safari 6.1+，连 IE10 都能降级为单色。
- 基础结构必须含三部分：
background-image: linear-gradient(...)+background-size: 300% 300%+animation: gradientShift 4.5s ease-in-out infinite - 动画时长建议 3–6 秒；太短显躁，太长看不出流动感
-
@keyframes起止点要闭合，例如：0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } - 移动端低端安卓机易掉帧，可加
will-change: background-position，但别滥用——只在真正需要的按钮上加
移动端点击没反应？不是渐变的问题
这是 iOS Safari 和部分安卓 WebView 默认压制原生点击反馈导致的，和渐变代码无关。不处理，用户会觉得按钮“点不动”。
立即学习“前端免费学习笔记（深入）”；
- 必须加
touch-action: manipulation到按钮上（CSS 或内联 style 都行） - 配
:active伪类做视觉反馈，推荐opacity: 0.8或transform: translateY(1px)；避免用scale()，某些安卓 WebView 会卡顿重绘 - 检查是否父层或遮罩用了
pointer-events: none—— 它会静默吞掉所有触摸事件 - 别依赖 JS 的
onclick模拟点击态；原生:active更及时，且兼容微信内嵌浏览器
border-image-source 做渐变边框的坑
想给按钮加渐变边框？border-color 不支持渐变，border-image 看似可行，但实际限制极多，稍不注意就失效。
-
border-image-source: linear-gradient()必须配border-image-slice: 1（不能是100%），否则整条声明被忽略 - Chrome 110+、Firefox 115+ 可用，Safari 17.4 仍不支持 —— 当前（2026年7月）仍属实验性特性
-
border-radius和border-image天然不协同，圆角区域常出现断层或纯色块 - 真实项目中更可靠的解法是：用
::before伪元素绝对定位一层渐变矩形，设inset: -3px、border-radius匹配、z-index: -1，再把按钮背景设为透明
最易被忽略的点：所有基于 background-position 的动画，都依赖 background-size 的“放大倍数”与渐变色数量匹配。4 色渐变却只写 200% 200%，动画走到一半就会露底色——这不是 bug，是图不够大。
