CSS3实现渐变背景兼容问题

请先使用以下格式的标题划分答案的主要内容：

问题背景

兼容方案

统一兼容方案

使用autoprefixer工具实现

示例说明

示例一：纵向渐变兼容

示例二：角向渐变兼容

问题背景

CSS3引入了渐变这一新的属性，能够使得网页背景更为美观，同时也方便网页设计。然而，各浏览器对这一新属性的支持程度不同，因此会引起兼容问题，尤其是在老旧的浏览器中无法正常呈现渐变效果。本篇文章将介绍两种CSS3渐变属性的兼容方案。

兼容方案

统一兼容方案

前缀：-webkit-、-moz-、-o-、-ms-，而且要注意前缀的顺序，以确保各个浏览器的兼容性。

举个例子：一个简单的CSS3渐变为：background:linear-gradient(#fafafa, #efefef);

使用前缀的渐变语法为

/* Safari 4-5, Chrome 1-9 */
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#fafafa), to(#efefef));

/* Safari 5.1, Chrome 10+ */
background:-webkit-linear-gradient(#fafafa, #efefef);

/* Firefox 3.6+ */
background:-moz-linear-gradient(#fafafa, #efefef);

/* IE 10+ */
background:-ms-linear-gradient(#fafafa, #efefef);

/* Opera 11.10+ */
background:-o-linear-gradient(#fafafa, #efefef);

/* CSS3标准 */
background:linear-gradient(#fafafa, #efefef);

因此，即可实现各大浏览器的渐变效果兼容。

使用autoprefixer工具实现

使用autoprefixer工具，可以非常方便地处理各种CSS前缀。

先安装autoprefixer，在命令行中输入：npm install -g autoprefixer

然后，在CSS文件中插入以下内容：

/* autoprefixer: off */
test {
    background: linear-gradient(#fafafa, #efefef);
}
/* autoprefixer: on */

再在命令行中输入：autoprefixer -b "last 2 versions" app.css，即可自动添加各种浏览器前缀。

示例说明

示例一：纵向渐变兼容

以下是一段设计师常用的CSS3代码：

background: -webkit-linear-gradient(top, #007FFF 0%, #B0C4DE 100%);
background: -moz-linear-gradient(top, #007FFF 0%, #B0C4DE 100%);
background: -o-linear-gradient(top, #007FFF 0%, #B0C4DE 100%);
background: linear-gradient(top, #007FFF 0%, #B0C4DE 100%);

可以看到，该示例中调用的是linear-gradient从顶部开始渐变。该代码会在谷歌和火狐中出现渐变效果，但在IE中呈现单色背景。

解决方法：需要补上-ms-(IE代码)的前缀，并且需要再次检查前缀顺序，最终实现如下：

background: -webkit-linear-gradient(top, #007FFF 0%, #B0C4DE 100%);
background: -moz-linear-gradient(top, #007FFF 0%, #B0C4DE 100%);
background: -o-linear-gradient(top, #007FFF 0%, #B0C4DE 100%);
background: -ms-linear-gradient(top, #007FFF 0%, #B0C4DE 100%);
background: linear-gradient(to bottom, #007FFF 0%, #B0C4DE 100%);

示例二：角向渐变兼容

以下是另一段设计师常用的CSS3代码：

background: -webkit-linear-gradient(top left, #007942 0%, #007942 46%, #e6e6e6 46%, #e6e6e6 54%, #007942 54%, #007942 100%);
background: -moz-linear-gradient(top left, #007942 0%, #007942 46%, #e6e6e6 46%, #e6e6e6 54%, #007942 54%, #007942 100%);
background: -o-linear-gradient(top left, #007942 0%, #007942 46%, #e6e6e6 46%, #e6e6e6 54%, #007942 54%, #007942 100%);
background: linear-gradient(top left, #007942 0%, #007942 46%, #e6e6e6 46%, #e6e6e6 54%, #007942 54%, #007942 100%);

该代码使用了角向线性渐变，该代码会在谷歌和火狐中出现渐变效果，但在IE中呈现单色背景。

解决方法：类似的，需要补上-ms-(IE代码)的前缀，并且需要再次检查前缀顺序，最终实现如下：

background: -webkit-linear-gradient(top left, #007942 0%, #007942 46%, #e6e6e6 46%, #e6e6e6 54%, #007942 54%, #007942 100%);
background: -moz-linear-gradient(top left, #007942 0%, #007942 46%, #e6e6e6 46%, #e6e6e6 54%, #007942 54%, #007942 100%);
background: -o-linear-gradient(top left, #007942 0%, #007942 46%, #e6e6e6 46%, #e6e6e6 54%, #007942 54%, #007942 100%);
background: -ms-linear-gradient(top left, #007942 0%, #007942 46%, #e6e6e6 46%, #e6e6e6 54%, #007942 54%, #007942 100%);
background: linear-gradient(to bottom right, #007942 0%, #007942 46%, #e6e6e6 46%, #e6e6e6 54%, #007942 54%, #007942 100%);