必须按特定顺序写多个background声明，因为浏览器从上到下解析css，遇不识别语法即跳过；故需将兼容性最差的私有前缀（如-webkit-linear-gradient）置前，标准linear-gradient()置后，否则旧版浏览器可能跳过而降级为纯色，导致渐变失效。
现代浏览器基本都支持标准 linear-gradient()，但老版本 Safari、Firefox 和 Opera 仍需私有前缀；不加或顺序错，渐变就直接失效或渲染异常。
为什么必须按特定顺序写多个 background 声明？
浏览器会从上到下解析 CSS 声明，遇到不认识的语法就跳过。所以必须把兼容性最差的（如 -webkit-）放前面，标准语法 linear-gradient() 放最后——否则 Chrome 旧版可能用不到自己的前缀版本，而直接 fallback 到下一条（比如纯色），导致渐变消失。
-
-webkit-linear-gradient()要放在-moz-linear-gradient()和-o-linear-gradient()之前，因为 Safari 5.1–6.0 只认老式-webkit-gradient()或早期-webkit-linear-gradient()，不识别后两者 -
-ms-linear-gradient()仅 IE10 支持，IE9 及更早必须用filter滤镜，且-ms-filter需配合filter双写（IE8–9 兼容模式下只读后者） - 标准
linear-gradient(to bottom, #fff, #000)必须在最后一行，否则低版本 Firefox（
-webkit-linear-gradient() 和 linear-gradient() 的方向参数不等价
同一个方向描述，在 WebKit 旧引擎和标准语法中含义相反：比如 top 在 -webkit-linear-gradient(top, ...) 中表示“从上到下”，但在标准 linear-gradient(to top, ...) 中表示“终点在顶部”即“从下到上”。混用会导致渐变流向翻转。
- 安全写法是统一用
to关键词：to bottom、to right、to bottom right，所有现代浏览器都支持，且语义一致 - 避免用数字角度（如
90deg）做跨浏览器渐变——WebKit 旧版把0deg解释为向上，标准规范定义0deg为向右，存在 90° 坐标系偏移 - 若必须支持 Android 4.3 WebView，只能用
-webkit-linear-gradient(0deg, ...)并接受它实际渲染为“从下到上”
IE 滤镜 filter: progid:DXImageTransform.Microsoft.gradient(...) 的坑
IE6–9 不支持 CSS 渐变，只能靠滤镜，但它和 CSS 属性互不兼容：滤镜会覆盖 background-color，且无法与 background-image 叠加使用。
-
gradientType=0是垂直渐变（默认），gradientType=1是水平渐变——注意拼写是gradientType，不是GradientType或type -
startcolorstr和endcolorstr必须是 7 位或 4 位十六进制色值（如#ff0000或#f00），不支持rgb()、hsl()或透明度 - IE8 下需同时写
filter和-ms-filter，且后者值必须用双引号包裹：-ms-filter: "progid:..."，否则解析失败
真正麻烦的不是写多少行兼容代码，而是当设计要求精确控制色标位置（比如 50% #fff, 50% #000 实现硬边过渡）时，WebKit 旧版对百分比 stop 的解析精度远低于标准实现，微小偏移就会导致视觉“跳跃”——这种差异没法靠前缀补救，只能降级为图片或放弃该效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
