css3线性渐变的渐变角度_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开始从顶部流入的梯度;

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

上面的代码片断是从官方版本W3C建立梯度。 它实际上更简单，也很容易解释，并且还会创建以下渐变。

您还可以使用bottom