CSS渐变跨浏览器不一致主因是语法不规范、前缀缺失及误用transition作用于background-image；应写全标准语法+必要前缀，避免直接过渡渐变，改用叠层切换、颜色过渡或animation实现动效。
CSS 颜色渐变在多浏览器中表现不一致，核心原因常是写法不规范、缺少必要前缀，或误用 transition 直接作用于渐变（background-image）——这本身不被大多数浏览器支持。
渐变本身要写全标准语法 + 兼容前缀
现代渐变应以 linear-gradient() 为主，但需注意：
- 必须写 W3C 标准语法（无前缀），放在最后覆盖旧写法
- 对老版 Safari（≤6）、Android 4.3 及更早，需加
-webkit-前缀 - IE10 支持无前缀
linear-gradient，但方向语法不同（用to bottom而非bottom）
✅ 正确写法示例：
background: #f0f0f0; background: -webkit-linear-gradient(top, #f0f0f0, #ccc); background: linear-gradient(to bottom, #f0f0f0, #ccc);
不要直接 transition 渐变背景
background-image（含渐变）不是 CSS 动画属性，无法被 transition 平滑过渡。强行写会静默失效，各浏览器表现不一（Chrome 可能跳变，Firefox 不动，Safari 忽略）。
立即学习“前端免费学习笔记（深入）”；
✅ 替代方案：
- 用两个元素叠层，分别设不同渐变，通过
opacity或z-index切换（可 transition） - 用
background-color过渡 + 半透明遮罩模拟“渐变变色”效果 - 借助
@keyframes+animation实现渐变切换（需 JS 触发或伪类控制）
color 过渡要确保起止值类型一致
即使只过渡文字颜色（color），若起始/结束值使用不同格式（如 #fff vs rgb(255,255,255) vs hsl(0,0%,100%)），部分浏览器（尤其 Safari）可能跳变或卡顿。
✅ 建议统一用 rgb() 或 hsl()，便于浏览器插值计算：
a {
color: rgb(30, 144, 255);
transition: color 0.3s ease;
}
a:hover {
color: rgb(255, 69, 0);
}
检查浏览器支持并合理降级
用 caniuse.com 查目标浏览器版本对渐变和 transition 的支持。对不支持渐变的旧 IE（≤9），可用 filter: progid:DXImageTransform.Microsoft.gradient(...)（仅 IE），或直接降级为纯色。
用 @supports 做特性检测比用户代理判断更可靠：
.btn {
background: #ccc;
}
@supports (background: linear-gradient(to right, #000, #fff)) {
.btn {
background: linear-gradient(to right, #000, #fff);
}
}
不复杂但容易忽略：写渐变时顺序、单位、关键词（to top vs top）和前缀缺一不可；想“动渐变”，就得绕开 background-image 的限制，选对技术路径。
