为确保渐变背景兼容性，应先声明background-color纯色备用色，再用background-image添加linear-gradient渐变；IE9及以下可加Filter属性，现代工具如Autoprefixer仅补前缀不加降级色。
直接给背景加一个纯色备用色，再在后面叠加渐变声明，旧浏览器会忽略不认识的渐变语法，只显示前面的纯色；新浏览器则会覆盖纯色，渲染渐变效果。
写法顺序很关键：纯色在前，渐变在后
css 是从上到下解析的，遇到不支持的属性值会跳过。利用这个机制，把兼容性好的纯色写在前面，渐变写在后面：
.box {
background-color: #4a6fa5;
background-image: linear-gradient(135deg, #4a6fa5, #6b8cbc);
}
注意 background-color 和 background-image 的配合
不能只靠 background 简写，因为简写会整体覆盖（旧浏览器可能把整个声明当无效而清空背景）。稳妥做法是：
- 用 background-color 明确指定降级颜色
- 再用 background-image 单独追加渐变（支持的浏览器才会生效）
- 避免混用 background: #xxx; background: linear-gradient(…); —— 后者在旧浏览器中可能导致背景完全消失
IE9 及更早版本需要额外处理
IE9 支持 filter 实现简单线性渐变（仅限 IE），如需兼容可加一层（但通常建议放弃 IE8 及以下）：
立即学习“前端免费学习笔记（深入）”；
.box {
background-color: #4a6fa5;
background-image: linear-gradient(135deg, #4a6fa5, #6b8cbc);
filter: progid:DXImageTransform.microsoft.gradient(startColorstr=’#4a6fa5′, endColorstr=’#6b8cbc’, GradientType=1);
}
注意：filter 仅对 IE ≤ 9 有效，现代 CSS 不推荐主动添加，除非项目明确要求支持。
用现代工具自动补全（可选）
如果项目使用 postcss 或 Autoprefixer，开启相应选项后，工具会自动为渐变添加 -webkit- 等私有前缀，并保留 fallback 色。但它们 不会自动插入 background-color 降级，这一步仍需手动写。