石家庄高端网站开发 CSS3线性渐变指南 渐变是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从顶部开始渐变；
1个
2
3
div {
background-image: linear-gradient(top, #FF5A00, #FFAE00);
}
上面的代码段是W3C用来创建渐变的正式版本。它实际上更简单，也很容易解释，并且还会创建以下渐变。
石家庄高端网站开发渐变顶部
您也可以使用bottom相反的方法，否则使用rightand left。
我们还可以使用对角线渐变angle degree作为起始位置来创建对角线渐变。这是一个例子：
1个
2
3
div {
background-image: linear-gradient(45deg, #FF5A00, #FFAE00);
}
上面的代码段将创建以下颜色渐变：
斜对角线
函数的第二个值将告诉第一个颜色信息及其停止位置，以百分比表示。停止位置实际上是可选的；浏览器足够聪明来确定正确的位置，因此当我们不指定第一种颜色的停止位置时，浏览器将0%作为默认颜色。
并且，下一个值是第二个颜色组合。它的工作方式与之前的值相同，仅当它是最后应用的颜色且我们未指定停止位置时，才将值100%用作默认值。现在，让我们看下面的示例：
1个
2
3
div {
background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
}
上面的代码段将创建一个渐变，就像我们之前看到的一样（没有区别），但是现在我们指定了颜色停止位置；
石家庄高端网站开发渐变顶部
现在让我们更改颜色stop，这一次我们将指定50%第一种颜色和51%第二种颜色，然后看看结果如何。
1个
2
3
div {
background-image: linear-gradient(top, #FF5A00 50%, #FFAE00 51%);
}
梯度停止
透明度
transparency也可以渐变创建。要创建效果，我们需要将颜色hex转换为rgba模式并降低Alpha通道。
1个
2
3
div {
background-image: linear-gradient(top, rgba(255,90,0,0.2), rgb(255,174,0,0.2));
}
上面的代码段会将色彩强度降低20%，渐变会像这样：
渐变透明
多种颜色
如果要添加更多颜色，只需用逗号定界符在其他颜色旁边添加颜色，然后让浏览器确定每种颜色的停止位置。
1个
2
3
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，因此，如果要在这些浏览器上添加渐变，则必须编写如下代码；
1个
2
3
div {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF5A00, endColorstr=#FFAE00);
}
它filter有其局限性：首先，它不允许添加三种以上的颜色，并且创建透明效果也有些棘手-不允许rgba，但是IE filter使用#ARGB；
1个
2
3
div {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FF5A00, endColorstr=#33FFAE00);
}
这里是为了帮助一个工具，你转换rgba到#ARGB。
演示版
下载源
更快地编写语法
如您在上面看到的，为了保持跨浏览器的梯度兼容性，我们需要再添加五行效率低下的代码。
我们可以采取许多方法来简化任务。例如使用Prefix-free，Prefixr，LESS或Sass来帮助编译代码，但最重要的是，我们建议使用ColorZilla Gradient这个工具。该工具将简单地生成渐变所需的所有代码，以使其在所有浏览器中均有效。
最后的话
今天，我们在创建渐变方面进行了很多讨论，我们研究了语法的每个部分，创建透明效果并保持了浏览器兼容性。因此，在这一点上，我们希望您已经对该主题有了更好的理解。
我们计划在以后的文章中仍然打算在CSS3 Gradients上探索很多东西，所以请继续关注Hongkiat.com。最后，感谢您阅读本文，我们希望您喜欢它。
