渐变按钮必须用 background-image 而非 background，并加 -webkit- 前缀及 background-color 兜底；hover 用 background-position 动画替代颜色顺序切换；active 需显式定义并关闭 tap-highlight；圆角需 background-clip: padding-box 防裁切。
background-image 而不是 background 是渐变按钮的硬性要求
直接写 background: linear-gradient(...) 在 iOS Safari 8–9、Android 4.3 及更老 WebView 中会彻底失效——这些环境只识别 background-image 属性下的渐变声明。必须显式使用 background-image，且把带前缀的版本放在前面：background-image: -webkit-linear-gradient(...), linear-gradient(...)。
漏掉 -webkit- 前缀或误用 background，会导致按钮在旧设备上变成透明或纯色 fallback（如果写了的话）。
- 务必补一个
background-color作为最终兜底，比如background-color: #2575fc - 方向优先用关键词（如
to bottom），比角度（如180deg）兼容性更好 - 不要在同一个声明里混用
background和background-image，CSS 层叠可能意外覆盖
hover 状态下别直接 swap 颜色顺序
写 .btn:hover { background-image: linear-gradient(..., #2471ff, #ff4d4d); } 看似简单，但 Chrome/Firefox 会平滑过渡，Safari 却常卡顿、跳变甚至出现灰边——因为渐变不是可插值属性，浏览器渲染精度不一。
更稳的做法是放弃“改颜色顺序”，改用 background-position 位移驱动视觉流动：
- 初始设
background-size: 200% 200%，扩大渐变画布 - 默认
background-position: 0% 0%，悬停时移到100% 100% - 配
transition: background-position 0.3s ease，所有主流浏览器都支持 - 避免在
:hover里改linear-gradient的角度（如to right→to left），部分安卓 WebView 会重绘错位
:active 状态必须手动定义，iOS 不会自动响应
渐变按钮在 iPhone 上点击没反馈，90% 是因为没写 :active 样式 + 没关系统高亮。iOS 默认点击蒙层会盖住渐变，且不触发任何状态变化。
-
button:active必须显式声明更深的渐变，例如background-image: linear-gradient(to bottom, #1a56db, #1e429f) - 加
-webkit-tap-highlight-color: transparent关掉灰色蒙层 - Android 4.4+ 建议加
touch-action: manipulation，避免 300ms 延迟影响按压感 - 别在
:active里改渐变方向（如to top），UC 内核等老引擎会错位重绘
圆角按钮要防边缘裁切失真
当 border-radius 较大（比如 >8px）且渐变角度斜向时，background-clip 默认值 border-box 会让圆角处颜色被粗暴裁切，出现难看的硬边或色块断裂。
- 显式加
background-clip: padding-box（这是默认值，但显式声明更可控） - 确保
padding足够，避免文字紧贴边缘导致渐变区域被挤压 - 若用径向渐变模拟光效，
radial-gradient(circle at 30% 30%, ...)的定位点要避开圆角区域，否则中心亮斑会被裁掉 - 测试真机：iOS Safari 对
background-clip支持稳定，但某些 Android 定制浏览器仍会忽略
background-position 动画和 :hover 切换之间的冲突——鼠标快速进出时动画容易卡在中间态。这不是写法错，而是 CSS 动画未声明 animation-fill-mode 导致的状态残留。生产环境建议用 @keyframes + animation-play-state 控制，而不是纯伪类切换。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
