ie6–ie9必须用filter滤镜兜底，ie6–ie8仅支持8位hex的progid滤镜（如#ff000000），gradienttype=0为垂直、1为水平；ie9不识别-ms-前缀，仅认filter；ie10+支持-ms-和标准语法，但需将filter置于最前并用:root .cls{filter:none}清除。

linear-gradient 在 IE10+ 和现代浏览器中可原生支持，但 IE6–IE9 必须用 filter 滤镜兜底；不加兼容处理直接写标准语法，这些老版本会完全丢弃背景，变成透明或继承父级色——这不是“没效果”，而是“没渲染”。

IE6–IE8 必须用 progid:DXImageTransform.Microsoft.gradient

这个滤镜是唯一能在 IE6–8 渲染渐变的手段，但有硬性限制：startColorstr 和 endColorstr 必须是 8 位十六进制（#AARRGGBB），不能写 #fff 或 rgb(255,255,255)，否则整个滤镜失效。

• GradientType=0 表示垂直渐变（top → bottom）
• GradientType=1 表示水平渐变（left → right）
• 透明度靠 AA 部分控制，比如半透黑是 #80000000，不透明红是 #ffff0000
• 必须写在 background 声明之后，否则会被覆盖

-ms-linear-gradient 只对 IE10 有效，IE9 不认

IE9 声称支持部分 CSS3，但实际把 -ms-linear-gradient 当作无效属性忽略——它只吃 filter。所以不要指望 IE9 能识别任何带前缀的 linear-gradient 变体。

小红书长文-谷歌浏览器

在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。

下载

• background: -ms-linear-gradient(top, #000, #fff); 在 IE9 中等于没写
• IE10 同时支持 -ms- 前缀和标准 linear-gradient，但优先级低于 filter（如果两者共存）
• 务必把 filter 放在 -ms- 声明之前，避免 IE10 错误叠加渲染

现代写法要按顺序排列，且 filter 需隔离 IE9

标准写法顺序决定兼容成败：老浏览器从上往下解析，遇到不认识的声明就跳过，所以要把最保守的（filter）放最前，最开放的（标准 linear-gradient）放最后。

• IE6–8 解析到 filter 就停，后面全忽略
IE9 解析 filter 后，看到 -ms- 和标准语法全跳过
• IE10+ 先执行 filter，再被 :root .cls { filter: none; } 清掉，最后用上标准语法
• 写成 :root { filter: none; } 不行——它会全局清空，必须限定选择器，如 :root .gradient { filter: none; }

别漏掉 fallback 背景色和性能警告

filter 是 CPU 渲染，不是 GPU 加速，大量使用会导致 IE6–8 页面滚动卡顿、重绘慢，甚至触发 IE 的“页面已停止响应”弹窗。

• 始终设一个纯色 background 作为所有浏览器的兜底，比如 background: #333;
• 避免在 :hover 或动画中动态切换 filter，IE 下会反复重算
• 移动端无需考虑此兼容——iOS Safari / Android Browser 早于 2013 年就全面支持标准 linear-gradient

真正难处理的不是写法本身，而是当设计稿要求「带透明度的多段渐变」时，IE 滤镜无法模拟 rgba() 或 color-stop 偏移——这时候只能降级为单色，或改用 PNG 背景图。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！