不是必须，但 Chrome/Safari/Edge 新旧版本兼容性差异大，直接写 linear-gradient 在老版 Safari（如 iOS 12）可能失效，需添加 -webkit-linear-gradient 前缀以确保渲染；现代项目可省略前缀，但需兼顾微信 WebView 等场景。
button background-image 渐变写法必须用 -webkit-linear-gradient 吗？
不是必须，但 Chrome/Safari/Edge 新旧版本兼容性差异大，直接写 linear-gradient 在老版 Safari（-webkit-linear-gradient 前缀，现代浏览器也认它。
实际写法建议这样：
background: linear-gradient(135deg, #4a90e2, #50c878); background: -webkit-linear-gradient(135deg, #4a90e2, #50c878);第二行会被新浏览器忽略，但老 WebKit 内核只认这行；第一行被现代浏览器优先采用。
- 角度推荐用
135deg（左下→右上），视觉上更自然，避免水平/垂直渐变显得生硬 - 别用
to top这类方向关键词——IE10/11 不支持，且部分安卓 4.x WebView 解析异常 - 渐变色停靠点不用写
0%, 100%，两个颜色值默认等距分布，写多了反而增加出错概率
表单按钮 hover 状态下渐变翻转怎么不闪屏？
直接改 background 会导致重绘闪烁，尤其在低配设备上。根本原因是渐变背景切换时触发 layout → paint 流程。解决办法是预先定义好 hover 的渐变，并用 transition 控制变化节奏。
关键点：
button {
background: linear-gradient(135deg, #4a90e2, #50c878);
transition: background 0.3s ease;
}
button:hover {
background: linear-gradient(135deg, #50c878, #4a90e2);
}
- 必须给
transition指定具体属性（background），不能写all，否则文字阴影、边框等也会参与过渡，拖慢响应 - 渐变方向保持一致（都是
135deg），只调换颜色顺序，否则会出现方向跳变，看起来像“撕裂” - 别用
opacity或transform模拟 hover 效果——按钮内容可能失真，且无法传达“可点击”语义
移动端点击按钮时渐变色变灰，是 active 状态没处理？
是的。iOS Safari 和部分安卓浏览器在 tap 时会自动加一层半透明遮罩（-webkit-tap-highlight-color），但更常见的是开发者漏写了 :active 样式，导致用户按下去瞬间回退到默认背景色（通常是白色或浅灰）。
补全三态样式才可靠：
button {
background: linear-gradient(135deg, #4a90e2, #50c878);
}
button:hover {
background: linear-gradient(135deg, #50c878, #4a90e2);
}
button:active {
background: linear-gradient(135deg, #3a7bc2, #40a868);
}
-
:active颜色建议比常态深 10–15%，模拟物理按压反馈，别用纯黑或过饱和色 - 不要依赖
touchstartJS 手动切 class——延迟明显，且 iOS 上可能触发两次 - 如果用了
appearance: none，记得同时重置border和outline，否则:active下 outline 可能突兀弹出
表单提交按钮禁用时渐变还显示，用户不知道不能点？
禁用状态（disabled）下，浏览器默认会降低按钮透明度，但渐变本身不会变灰——结果就是“看着很炫，点不了”。必须显式覆盖 background 并调整文字颜色。
立即学习“前端免费学习笔记（深入）”；
写法示例：
button:disabled {
background: linear-gradient(135deg, #cccccc, #999999);
color: #666;
cursor: not-allowed;
}
- 渐变色用灰阶组合，避免保留原色系（比如禁用时还用蓝→绿），会造成认知冲突
- 务必加
cursor: not-allowed，否则鼠标悬停时仍是手型，误导用户 - 别用
opacity: 0.5——它会让整个按钮（包括文字、边框）一起变淡，可读性下降，且无法区分“加载中”和“已禁用”
