梯度 是一个伟大的颜色特征除了在CSS3 。 而不是仅仅增加一个单一的颜色，我们现在可以在一个声明块添加多个颜色组合，而不依赖于图像，这可能会降低我们网站上的HTTP请求 ，允许网页加载速度更快。
如果您在CSS3中使用过渐变，则您可能熟悉两种方法：径向渐变和线性渐变。 今天的帖子将是关于后者的。
创建渐变
作为规范说在CSS3渐变的图像 ，它具有像其他新功能，此外没有特殊的属性，所以它使用声明的background-image属性。
如果我们看一看梯度完整的语法，它看起来软垫 一点，这可能导致混乱的一些人。
div {
background-image: -webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
} 因此，让我们一一深入研究语法的每个部分，以使事情变得更清楚。
首先，线性梯度被声明用linear-gradient()函数。 该函数具有三个主要值。 第一个值定义梯度的起始位置。 您可以使用描述性的关键字，如top开始从顶部 流入的梯度;
div {
background-image: linear-gradient(top, #FF5A00, #FFAE00);
} 上面的代码片断是从官方版本W3C 建立梯度。 它实际上更简单，也很容易解释，并且还会创建以下渐变。
您还可以使用bottom反其道而行之，否则right和left 。
我们也可以创建使用对角线梯度angle degree的梯度起始位置。 这是一个例子：
div {
background-image: linear-gradient(45deg, #FF5A00, #FFAE00);
} 上面的代码段将创建以下颜色渐变：
该函数的第二个值会告诉第一颜色 信息和以百分比表示，它的停止位置 。 停止位置实际上是可选的； 浏览器足够聪明来确定适当的位置，所以当我们不指定第一种颜色的停止，浏览器将0%作为默认值。
而且，下一个值是第二颜色 组合。 它的工作原理就像以前的值，只有当它是后来加上去的颜色，我们不指定停止位置 ，值100%将被视为默认。 现在，让我们看下面的例子：
div {
background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
} 上面的代码片断将创建像我们前面看到的（无差异），但现在我们指定的颜色停止位置的梯度;
现在，让我们改变颜色停止 ，而这一次，我们将指定50%的第一颜色和51%为第二色彩，让我们来看看它是如何变成了;
div {
background-image: linear-gradient(top, #FF5A00 50%, #FFAE00 51%);
}
透明度
创建transparency的渐变也是可能的。 要创建效果，我们需要转换颜色hex到rgba模式并降低alpha通道。
div {
background-image: linear-gradient(top, rgba(255,90,0,0.2), rgb(255,174,0,0.2));
} 的片段上方将由降低颜色强度20%并且梯度会变成这样的：
多种颜色
如果要添加更多颜色，只需用逗号分隔符将颜色添加到另一种颜色旁边，然后让浏览器确定每种颜色的停止位置。
div {
background-image: linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
} 上面的代码段将创建以下彩虹。
浏览器兼容性
不幸的是，在撰写本文时，当前所有的浏览器都尚未支持标准语法。 他们还需要供应商前缀（ -webkit- ， -moz- ， -ms-和-o- ）。 因此，这就是为什么完整的语法如下所示：
div {
background-image: -webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
} 在另一方面，在Internet Explorer中 ，特别是第9版和更低的，更谈不上标准。 在IE9 和下面的梯度声明的filter ，所以如果我们想在这些浏览器添加渐变，我们不得不写这样的事情;
div {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF5A00, endColorstr=#FFAE00);
} 该filter有其局限性：首先，它不允许超过三种颜色添加和创建透明效果也有点难度的-它不允许rgba ，但IE filter使用#ARGB ;
div {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FF5A00, endColorstr=#33FFAE00);
} 这里是一个工具，帮助你转换rgba到#ARGB 。
更快地编写语法
正如你可以在上面看到，为了保持梯度兼容性跨浏览器 ，我们需要添加哪些代码的五个行是低效的 。
我们有许多方法可以简化任务。 如使用无前缀 ， Prefixr ， LESS 或萨斯 来帮助编译代码，但首先，我们建议使用此工具， ColorZilla梯度 。 该工具将简单地生成渐变所需的所有代码，以在所有浏览器中正常工作。
最后的话
我们已经创建渐变讨论颇多今天，我们已经调查了语法的各个部分，创建透明效果和保持浏览器的兼容性 。 所以，在这一点上，我们希望你已经有一个关于这个问题的更好的理解 。
仍然有许多事情，我们计划在未来岗位上CSS3渐变 探索，敬请调到Hongkiat.com。 最后，感谢您阅读本文，我们希望您喜欢它。
进一步阅读
翻译自: https://www.hongkiat.com/blog/css3-linear-gradient/
