现代浏览器已支持无前缀linear-gradient，但旧版Safari（≤6.1）、Android Browser（≤4.3）和IE10以下需补全-webkit-、-moz-、-o-前缀，且顺序不能错；IE9及更早需纯色fallback；radial-gradient需显式声明center和circle；PostCSS autoprefixer需合理配置browserslist；background-size与background-position配合时应使用百分比并锁定原点。
Chrome/Firefox/Safari里linear-gradient不生效？补全前缀是必须的
现代浏览器已普遍支持无前缀的 linear-gradient，但如果你的样式在旧版 Safari（≤6.1）、Android Browser（≤4.3）或 IE10 以下仍需运行，光写 background: linear-gradient(...) 会直接失效——这些环境只认带前缀的版本。
实际要写成这样才稳妥：
background: -webkit-linear-gradient(top, #ff0000, #0000ff); background: -moz-linear-gradient(top, #ff0000, #0000ff); background: -o-linear-gradient(top, #ff0000, #0000ff); background: linear-gradient(to bottom, #ff0000, #0000ff);
- 顺序不能乱：
-webkit-必须放在最前，否则老版 Safari 可能跳过后续声明 -
top和to bottom语义等价，但前缀版本不支持to写法，混用会出错 - IE9 及更早完全不支持任何渐变，得准备纯色 fallback：
background: #ff0000;放在最上面
radial-gradient在不同浏览器里中心点默认值不一样
Chrome 和 Firefox 默认按 center center 渲染，但旧版 WebKit（如 Safari 5.1）默认是 50% 50%，看似一样，实则在某些容器尺寸下计算结果有像素级偏差——尤其配合 background-size 或缩放时容易偏移。
解决办法是显式声明位置和尺寸：
立即学习“前端免费学习笔记（深入）”；
background: -webkit-radial-gradient(center, circle, #fff, #000); background: -moz-radial-gradient(center, circle, #fff, #000); background: radial-gradient(circle at center, #fff, #000);
- 用
circle at center替代旧式center，确保现代语法行为一致 - 避免用
ellipse而不指定宽高比，不同引擎对默认椭圆拉伸逻辑不同 - 如果背景图需要响应式缩放，优先用
background-size: cover;配合固定中心点，别依赖渐变自身拉伸
PostCSS自动加前缀够用吗？要看你配的browserslist范围
很多人以为开了 autoprefixer 就万事大吉，结果上线后发现 iOS 7 的 Safari 还是白屏——问题常出在 browserslist 配置太激进，比如只写了 last 2 versions，它不会覆盖已停止更新的旧系统。
- 明确写死关键旧版本：
ios_saf >= 6、android >= 4.3、ie >= 10 - 检查输出 CSS：运行
npx autoprefixer --info看当前配置实际覆盖哪些浏览器 - PostCSS 不处理
repeating-linear-gradient等高级函数的前缀，这类得手动补或换方案
渐变当背景图时，background-size和background-position怎么配合才不撕裂
渐变本身是无限平铺的图像，但加上 background-size 后，各浏览器对“如何缩放起始点”的解释存在差异。常见现象是：Safari 下渐变从左上角开始铺，Chrome 却从容器中心扩散，导致视觉错位。
唯一可靠做法是锁定定位原点：
background: linear-gradient(45deg, #f00, #00f); background-size: 200% 200%; background-position: 25% 25%; /* 所有浏览器都按这个坐标裁切 */
- 永远用百分比写
background-position，避免 px 值在缩放时失准 - 如果要用
cover或contain，必须配合background-origin: border-box;，否则 padding 区域可能暴露渐变边缘 - 动画渐变时，只改
background-position，别动background-size——后者触发重排，性能差且兼容性更脆弱
渐变兼容性真正的麻烦不在语法，而在“同一行代码在不同浏览器里算出来的像素位置是否一致”。越想省事写一行，越容易掉进渲染偏差的坑里。
