您的位置: 首页  >  文章  >  CSS3线性渐变指南

CSS3线性渐变指南

分类: 文章 • 2022-11-15 00:16:58

渐变是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()函数声明linear-gradient() 。 该函数具有三个主要值。 第一个值定义梯度的起始位置。 您可以使用诸如top类的描述性关键字来启动从top开始的渐变； 

div {
	background-image: linear-gradient(top, #FF5A00, #FFAE00);	
}

上面的代码段是W3C用来创建渐变的正式版本。 它实际上更简单，也很容易解释，并且还会创建以下渐变。

CSS3线性渐变指南

您还可以使用bottom做相反的操作，或者使用right和left 。

我们还可以使用angle degree作为梯度开始位置来创建对角梯度。 这是一个例子： 

div {
	background-image: linear-gradient(45deg, #FF5A00, #FFAE00);
}

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

CSS3线性渐变指南

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

并且，下一个值是第二个颜色组合。 它的工作方式与先前的值相同，仅当它是最后应用的颜色且我们未指定停止位置时 ，才将100%的值作为默认值。 现在，让我们看下面的示例： 

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

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

CSS3线性渐变指南

现在更改色标 ，这一次我们将第一种颜色指定为50% 51% ，将第二种颜色指定为51% ，然后看看结果如何。 

div {
	background-image: linear-gradient(top, #FF5A00 50%, #FFAE00 51%);
}
CSS3线性渐变指南

透明度

也可以在渐变中创建transparency 。 要创建效果，我们需要将hex颜色转换为rgba模式并降低alpha通道。 

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

上面的代码段将使颜色强度降低20% ，并且渐变将如下所示：

CSS3线性渐变指南

多种颜色

如果要添加更多颜色，只需用逗号分隔符将颜色添加到另一种颜色旁边，然后让浏览器确定每种颜色的停止位置。 

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

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

CSS3线性渐变指南

浏览器兼容性

不幸的是，在撰写本文时，当前所有的浏览器都尚未支持标准语法。 他们仍然需要供应商前缀（ -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的工具。

更快地编写语法

如您在上面看到的，为了保持跨浏览器的渐变兼容性，我们需要再添加五行效率低下的代码。

我们可以采取许多方法来简化任务。 例如使用Prefix-free ， Prefixr ， LESS或Sass来帮助编译代码，但是最重要的是，我们建议您使用ColorZilla Gradient这个工具。 该工具将简单地生成渐变所需的所有代码，以在所有浏览器中正常工作。

最后的话

今天，我们在创建渐变方面进行了很多讨论，我们研究了语法的每个部分，创建透明效果并保持了浏览器兼容性 。 因此，在这一点上，我们希望您已经对该主题有了更好的理解 。

我们计划在以后的文章中仍然打算在CSS3 Gradients上探索很多东西，所以请继续关注Hongkiat.com。 最后，感谢您阅读本文，我们希望您喜欢它。

进一步阅读

翻译自: https://www.hongkiat.com/blog/css3-linear-gradient/

相关推荐