旧版浏览器不支持linear-gradient()会静默失效，需按顺序声明多版本渐变并用filter兜底，保底色必须前置，且滤镜无法实现透明度渐变或与图片叠加。
旧版浏览器（IE8–9、Android 4.3 WebView、Safari ≤5.1）不支持 linear-gradient()，直接忽略整条 background 声明，退为透明或继承色——不是报错，而是静默失效。必须用多层声明 + 特定顺序 + 滤镜兜底，否则渐变会彻底消失。
为什么 background 声明顺序不能乱
浏览器按 CSS 声明从上到下解析，遇到不认识的语法（如 -webkit-linear-gradient() 在老 Firefox 里，或 linear-gradient() 在 IE9 里）就跳过该行，继续看下一行。所以：
-
-webkit-linear-gradient()必须放在最前：Safari 5.1–6.0 只认它，不认-moz-或标准写法 -
-moz-linear-gradient()紧随其后：Firefox 3.6–15 需要它，但新版已弃用 -
-o-linear-gradient()放第三：Opera 11.1–12.1 使用，之后转向标准 -
linear-gradient()必须在最后一行：现代浏览器取这一条，旧浏览器已跳过前面所有，这条若放前面会被跳过，导致无渐变
IE8–9 必须用 filter，且 color 值不能简写
IE8–9 完全不解析任何 gradient 函数，只能靠 filter 和 -ms-filter。关键限制是：
-
startcolorstr和endcolorstr必须是 8 位十六进制（#AARRGGBB），比如#ff000000（纯黑不透明），不能写#000或rgb(0,0,0) - 必须同时写
filter和-ms-filter：IE8 兼容模式只读filter，IE9 标准模式只读-ms-filter，且后者值需用双引号包裹 -
gradientType=0是垂直渐变（默认），=1是水平渐变——拼写必须小写，且不能写成GradientType
方向参数在 WebKit 旧版和标准语法中含义相反
同一个“从上到下”，在不同引擎里写法和语义不一致：
立即学习“前端免费学习笔记（深入）”；
-
-webkit-linear-gradient(top, #fff, #000)：表示起点在顶部，向下渐变 -
linear-gradient(to bottom, #fff, #000)：to bottom表示终点在底部，也是向下渐变（语义一致） - 但
-webkit-linear-gradient(0deg, ...)中 0deg 指向上，而标准linear-gradient(0deg, ...)中 0deg 指向右——混用会导致渐变翻转 - 结论：统一用
to bottom/to right关键词，避免数字角度；若必须兼容 Android 4.3 WebView，只能用-webkit-linear-gradient(0deg, ...)并接受它实际渲染为“从下到上”
渐变失效时 fallback 色必须显式声明
不要依赖浏览器默认背景色。一旦所有渐变声明都被跳过，元素可能呈现透明（如块级元素在父容器白色背景下看不见），或继承文字色（造成可读性灾难）。必须加一层保底：
- 在所有渐变声明之前，先写
background: #e0e0e0;（或语义匹配的单色） - 不要把保底色写在最后：否则它会被后面的渐变声明覆盖，旧浏览器又看不到渐变，最终啥也没了
- 滤镜与 background-color 不叠加：IE 滤镜会完全覆盖
background-color，所以保底色只能靠滤镜自身颜色或前置单色声明
最易被忽略的是：滤镜无法实现透明度渐变（rgba()）或与 background-image 叠加；而现代 linear-gradient() 可以和图片共存。这意味着降级后你失去的不只是视觉效果，还有设计组合能力——这点在重构老项目时常常突然暴露。
