CSS3线性渐变指南

渐变是CSS3中很棒的色彩功能，它不仅可以只添加一种颜色，还可以在一个声明块中添加多种颜色组合，而无需依赖图像，这可以减少我们网站中的HTTP请求，从而使网站加载速度更快。

创新互联是一家集网站建设,蛟河企业网站建设,蛟河品牌网站建设,网站定制,蛟河网站建设报价,网络营销,网络优化,蛟河网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

如果您在CSS3中使用过渐变，那么您可能熟悉两种方法：径向渐变和线性渐变。今天的文章主要讨论后者。

创建渐变

正如规范中所说，CSS3中的渐变是一个图像，它不像其他新添加的特性那样具有特殊属性，所以它是使用background-image属性声明的。

如果我们看一下渐变的完整语法，它看起来有点臃肿，这可能会导致一些人的困惑。

1  div {

2  background-image: -webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);

3  background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);

4  background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);

5  background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);

6  background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);

7  }

所以，让我们一个一个深入到语法的每一部分，使事情更清楚。

首先，使用linear-gradient()函数声明线性梯度，该函数有三个主要值。第一个值定义了渐变的起始位置，你可以使用一个描述性的关键字，如顶部开始梯度流动从顶部；

1  div {

2  background-image: linear-gradient(top, #FF5A00, #FFAE00);

3  }

上面的代码片段是W3C创建渐变的官方版本，它实际上更简单，也很容易理解，它还会创建如下渐变。

你也可以使用底部来做相反的事情，或者左右移动。

我们还可以创建一个对角梯度使用角度作为梯度的起始位置。下面是一个例子：

1  div {

2  background-image: linear-gradient(45deg, #FF5A00, #FFAE00);

3  }

上面的代码段将创建以下颜色渐变：

函数的第二个值将告诉第一个颜色信息及其以百分比表示的停止位置，停止位置实际上是可选的；浏览器非常聪明，可以确定正确的位置，所以当我们不指定第一个颜色的停止时，浏览器将默认为0%。

下一个值是第二个颜色组合。它的工作方式与之前的值类似，只是如果它是最后应用的颜色，并且我们没有指定停止位置，那么将使用100%作为默认值。现在，让我们看看下面的例子：

1  div {

2  background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);

3  }

上面的代码段将创建一个渐变，就像我们之前看到的那样(没有区别)，但现在我们指定颜色停止位置；

现在让我们改变颜色停止，这次我们将为第一种颜色指定50%为第二种颜色指定51%，让我们看看结果如何；

1  div {

2   background-image: linear-gradient(top, #FF5A00 50%, #FFAE00 51%);

3   }

透明度

在渐变中创建透明度也是可能的，为了创建效果，我们需要将颜色十六进制转换为rgba模式，并降低alpha通道。

1  div {

2  background-image: linear-gradient(top, rgba(255,90,0,0.2), rgb(255,174,0,0.2));

3  }

上面的代码段将颜色强度降低20%，渐变效果如下：

多种颜色

如果您希望添加更多的颜色，只需使用逗号分隔符将颜色添加到另一个颜色旁边，并让浏览器确定每个颜色的停止位置。

1  div {

2  background-image: linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);

3  }

上面的代码片段将创建下面的彩虹。

浏览器兼容性

不幸的是，在撰写本文时，所有当前的浏览器都还没有支持标准语法。他们仍然需要厂商前缀(-webkit-、-moz-、-ms-和-o-)。所以，这就是为什么完整的语法看起来是这样的：

1  div {

2  background-image: -webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);

3  background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);

4  background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);

5  background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);

6  background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);

7  }

另一方面，Internet Explorer，特别是版本9或更低的版本，离标准还很远。在IE9和以下的渐变是用过滤器声明的，所以如果我们想在那些浏览器上添加渐变，我们必须这样写；

1  div {

2 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF5A00,endColorstr=#FFAE00);

3  }

这个滤镜有它的局限性：首先，它不允许添加超过三种颜色，创建透明效果也有点棘手——它不允许rgba，但IE滤镜使用#ARGB；

1  div {

2  ilter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FF5A00,endColorstr=#33FFAE00);

3  }

这是一个帮助你将rgba转换成#ARGB的工具。

更快地编写语法

正如您在上面看到的，为了保持跨浏览器的梯度兼容性，我们需要添加5行代码，这是低效的。

我们有很多方法可以简化任务；例如使用无前缀，前缀，LESS或Sass来帮助编译代码，但最重要的是，我们建议使用这个工具，ColorZilla Gradient。该工具将简单地生成渐变在所有浏览器中工作所需的所有代码。

最后

今天我们已经讨论了很多关于创建渐变的内容，我们已经研究了语法的每个部分，创建透明的效果和维护浏览器的兼容性。所以，在这一点上，我们希望你已经有一个更好的理解这个主题。