CSS背景渐变在旧版浏览器不显示_编写CSS渐变回退方案与背景图-css教程-PHP中文网

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

css背景渐变在旧版浏览器不显示_编写css渐变回退方案与背景图

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