IE10以下不支持background: linear-gradient()，需在渐变声明前加纯色background回退；IE9支持border-radius和box-shadow但不支持渐变，回退色须与设计主色一致并协调边框；PNG替代方案需注意尺寸、路径及兼容性；PostCSS等工具生成的回退色未必准确，须手动校验并真机测试渲染效果。

IE10以下不显示background: linear-gradient()怎么办

直接加一层纯色background声明就行，浏览器会自然降级——旧版IE（如IE9及更早）完全忽略不认识的渐变语法，只认前面那个有效值。

• 必须把单色背景写在渐变声明之前，顺序不能反，否则旧浏览器会把整个background当无效值丢弃
• 别用background-image单独写渐变，IE9-不支持该属性里的渐变函数，只认background简写中的第一个有效值
• 示例：

  button {
    background: #4a6fa5;
    background: linear-gradient(to bottom, #4a6fa5, #2c4d75);
  }

需要兼容IE9且保留圆角+阴影时怎么处理

IE9支持border-radius和box-shadow，但不支持渐变；一旦你用CSS渐变覆盖了背景，它就不再继承父级或默认背景色，导致圆角内显白底、阴影边缘发虚。

• 回退色必须和设计稿主色一致，不能随便选灰色或白色，否则在圆角裁剪区域会露馅
• 如果按钮有border，记得同步检查边框颜色是否与回退背景协调，IE9下background失效后全靠边框“撑形”
• 避免在IE9中依赖background-clip: padding-box——它不被支持，圆角处渐变截断问题无法靠CSS修复

用PNG背景图替代渐变时要注意什么

PNG方案本质是“骗”旧浏览器，但容易因尺寸、重复方式或路径出错而彻底不显示。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• 图片宽度/高度至少为容器最大可能尺寸的2倍，防止平铺时接缝明显；设background-repeat: no-repeat更安全
• 路径必须相对CSS文件位置写，不是HTML位置——比如CSS在/css/main.css，图就得放在/css/bg-btn.png或用根对齐路径/images/bg-btn.png
• 别用半透明PNG模拟渐变：IE6不支持alpha通道，会变成灰底黑字；IE7/8虽支持，但filter: progid:DXImageTransform.Microsoft.AlphaImageLoader会破坏background-position和border-radius

PostCSS自动加回退是否可靠

像postcss-cssnext或pleeease这类工具确实能自动生成备用色，但它们只解决“有没有”，不解决“对不对”。

立即学习“前端免费学习笔记（深入）”；

• 工具生成的回退色常取渐变起点色，但实际设计中起点可能是高光，真正要回退的是中间调或终点色
• 遇到repeating-linear-gradient或带rgba()的渐变，多数插件直接放弃生成回退，留空——你得手动补
• Webpack里用css-loader?minimize压缩时，可能把多行background声明合并成一行，导致IE误判整条规则无效

渐变回退不是加一行代码就完事的事，关键在验证旧浏览器里每个像素是否按预期渲染——尤其是圆角切角、文字重叠、hover状态切换这些地方，最容易漏测。