老版本浏览器不识别linear-gradient是因为CSS3标准定稿前各厂商按草案实现语法不统一，如WebKit需-webkit-linear-gradient、Firefox 2–3.6只认-moz-linear-gradient，旧浏览器解析器未升级，不加对应前缀即忽略整条声明。
为什么老版本浏览器不识别 linear-gradient
因为 linear-gradient 在 CSS3 标准定稿前，各厂商按草案实现时语法不统一。比如 WebKit 内核（Chrome/Safari 早期）要求写成 -webkit-linear-gradient(left, red, blue)，而 Firefox 2–3.6 只认 -moz-linear-gradient(top, red, blue)。标准最终敲定后，才统一为 linear-gradient(to right, red, blue) —— 但旧浏览器不会自动升级解析器，所以不加前缀就直接忽略整条声明。
radial-gradient 不加 -webkit- 在 Safari 5.1 会失效
径向渐变兼容性更差。Safari 5.1 和 Chrome 10–25 只支持带 -webkit- 前缀的写法，且参数顺序不同：老版要求先写形状和大小（如 circle at center），新版标准把位置放在最后。若只写标准语法 radial-gradient(circle at center, red, blue)，这些浏览器会当作无效值丢弃，背景直接变透明或回退到 background-color。
- Firefox 3.6 需要
-moz-radial-gradient(center, circle, red, blue) - IE10 支持
-ms-radial-gradient，但仅限于椭圆、不支持at语法 - Opera 11.1–12.1 必须用
-o-radial-gradient
现在还用不用手动写前缀
取决于目标环境：
- 纯现代项目（Chrome ≥ 90 / Firefox ≥ 80 / Safari ≥ 14 / Edge ≥ 90）：可直接用标准语法，
linear-gradient和radial-gradient全部原生支持，无需前缀 - 需兼容 IE10–11 或 Android 4.4 WebView：仍要保留
-ms-和-webkit-（后者用于旧 WebView） - 用构建工具（如 PostCSS + Autoprefixer）：配置
browserslist后，它会自动注入所需前缀，你只需写标准语法
手动硬编码前缀容易漏掉某个引擎、写错参数顺序，也难维护。现在更推荐靠工具生成，而不是凭记忆手写。
立即学习“前端免费学习笔记（深入）”；
常见错误：混用前缀和标准语法却没 fallback
比如这样写：
background: -webkit-linear-gradient(left, red, blue); background: linear-gradient(to right, red, blue);
看似覆盖了，但实际在 Safari 5.1 下，第二行会被忽略，第一行生效；而在 Firefox 3.6 下，第一行被忽略，第二行也无效 → 最终无背景。正确做法是把前缀版放前面，标准版放最后，让支持者覆盖不支持者：
background: -moz-linear-gradient(top, red, blue); background: -webkit-linear-gradient(top, red, blue); background: -o-linear-gradient(top, red, blue); background: -ms-linear-gradient(top, red, blue); background: linear-gradient(to bottom, red, blue);
注意：顺序不能颠倒，且所有前缀必须参数一致，否则不同浏览器渲染效果可能偏差很大。
真正容易被忽略的是——即使加了全套前缀，repeating-linear-gradient 在 IE10/11 里依然不支持，得用 SVG 或图片降级。渐变不是“写了前缀就万事大吉”，得看具体函数和浏览器组合。
