必须用 background-image: -webkit-linear-gradient(), linear-gradient() 并设 background-color fallback；iOS/Android 需 :active 深色渐变、-webkit-tap-highlight-color: transparent；IE10–11 要手动加 filter 兼容。
用 background-image + linear-gradient 写按钮渐变，核心是别漏掉浏览器前缀和 fallback 颜色
纯 CSS 渐变按钮不依赖图片，但直接写 background: linear-gradient(...) 在老版本 Safari（iOS 6.1–9.3）或 Android 4.3 及以下会失效——因为这些环境只认带 -webkit- 前缀的 background-image 形式。所以必须显式声明 background-image，并补上前缀版本。
- 写法必须是
background-image: linear-gradient(...)，不能只写background: linear-gradient(...)，否则 Safari 8–9 不识别 - 必须加
-webkit-linear-gradient作为降级：放在标准写法之前，让旧引擎优先匹配 - 务必声明一个纯色
background-color作为最终 fallback，防止所有渐变都失效时按钮彻底透明 - 渐变方向推荐用标准关键词（如
to bottom），比角度（如180deg）兼容性更好
按钮 hover 状态下渐变反转的常见写法陷阱
想实现“默认蓝→绿，hover 时绿→蓝”，不能只改 background-image 的颜色顺序，还要注意过渡行为：CSS transition 默认不支持渐变属性的平滑过渡，直接写 transition: background-image .3s 在 Chrome/Firefox 有效，但在 Safari 中可能卡顿或跳变。
- 稳妥做法是用
transition: background-color .3s搭配两个不同渐变的 class 切换，或改用transform: scale()等可硬件加速的属性做动效辅助 - 如果坚持过渡渐变，确保起止色对比足够，避免 Safari 下因渲染精度问题出现灰边或色带
- 不要在
:hover里只改linear-gradient的角度（比如从to right改成to left），部分安卓 WebView 会闪退或不重绘
移动端点击无反馈？得处理 active 状态和 tap-highlight
渐变按钮在 iOS 上点击没按压感，通常是因为没定义 :active 样式，且系统默认的灰色高亮没关。
- 必须写
button:active { background-image: linear-gradient(to bottom, #333, #111); }（颜色比默认更深），否则点击像没反应 - 加上
-webkit-tap-highlight-color: transparent;消除 iOS 点击蒙层，不然渐变会被盖住 - Android 4.4+ 需要
touch-action: manipulation;提升点击响应速度，避免 300ms 延迟影响按钮反馈 - 别用
:active改渐变方向（如to top），某些 UC 浏览器内核会错位重绘
IE10–11 怎么兼容？别信自动转换工具
IE10–11 支持 linear-gradient，但只接受语法 filter: progid:DXImageTransform.Microsoft.gradient(...)，而且必须用 HEX 或 RGB，不支持 HSL/RGBA 渐变色。Babel 或 PostCSS 插件（如 autoprefixer）不会帮你补这个 filter，得手动加。
立即学习“前端免费学习笔记（深入）”；
- IE10–11 的
filter写法：先写filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4facfe', endColorstr='#00f2fe'); - 必须把
filter放在background-image之后，否则会被覆盖；同时设zoom: 1触发 hasLayout - RGBA 渐变在 IE 下全失效，只能降级为不透明纯色组合，比如
#4facfe → #00f2fe改成#4FACFE → #00F2FE - IE11 的 Edge 模式（documentMode=11）已支持标准
linear-gradient，但企业内网常强制用 IE8/9 兼容模式，所以filter仍需保留
background-color fallback 和 :active 的深色渐变——用户点下去没视觉反馈，第一反应不是代码错了，而是“这按钮坏了”。 
