渐变是从一种颜色到另一种颜色的渐变。线性渐变是沿颜色渐变的起点到终点沿轴（水平，垂直或特定角度）更改颜色。

在这里，我将介绍如何在CSS中实现线性渐变。

线性渐变

要创建线性渐变，您需要指定渐变的轴以及沿该轴的各种颜色。将在垂直于轴的方向上绘制颜色，并且将实现多种颜色之间的平滑过渡。具体语法如下：

linear-gradient（gradient_line，color1，color2，...）

gradient_line指定一条渐变线，然后沿轴显示各种颜色。

轴线

可以省略轴线。此时，它使用默认值“ to bottom”。有两种方法可以指定轴线：

使用角度

“ 0deg”表示垂直向上，然后顺时针增大角度，“ 90deg”指向右侧。

使用常量

恒定描述角值

顶部

上

0deg

向右

在右侧

90度

自下而上

下

180度

向左

左

270deg

常量可以组合使用，例如“到左上角”表示到左上角。

轴的绘制方法可以理解为：从元素的中心开始css3线性渐变 百分比，以指定的角度延伸到元素的两个方向css3线性渐变 百分比，轴的终点是与元素的边界相交的点。以指定角度和轴起点的角度处的元素。点是从指定角度沿相反方向与元素的边界相交的点。下面我们使用一些示例来加深对轴的理解。

线性梯度示例

下面是在背景上应用线性渐变的一些示例。

垂直梯度

垂直梯度

背景：线性渐变（＃cd6600，＃0067cd）；

还可以指定轴，以下方法可以达到与上述相同的效果，如下所示：

背景：线性渐变（顶部，＃cd6600，＃0067cd）；

背景：线性渐变（从底部到＃cd6600，＃0067cd）；

背景：线性渐变（180deg，＃cd6600，＃0067cd）；

背景：线性渐变（到底部，＃cd6600 0％，＃0067cd 100％）；

斜角渐变

斜角渐变

背景：线性渐变（135deg，＃cd6600，＃0067cd）；

您还可以指定负角，如下所示：

背景：线性渐变（-45deg，＃cd6600，＃0067cd）；

多色渐变

多色渐变

背景：线性渐变（＃6600cd，＃cd6600 20％，＃00cd6 6);

多色斜面渐变

多色斜面渐变

背景：线性渐变（右上角，＃cd6600，白色，＃0067cd）；

重复线性渐变

重复线性梯度是线性梯度的重复线性梯度形式。定义线性渐变后，重复线性渐变将根据轴重复您的渐变，直到其填充整个背景为止。

使用重复线性渐变的关键是您需要定义颜色节点。应当注意，您定义的最后一种颜色将与第一种颜色相关。处理不当会导致颜色急剧变化。

以下示例说明了重复线性梯度的使用。

重复线性渐变

背景：重复线性渐变（＃cd6600，＃0067cd 20px，＃cd6600 40px）；

重复线性渐变

背景：重复线性渐变（90deg，＃cd6600，＃0067cd 20px，＃cd6600 40px）；

重复线性渐变

背景：重复线性渐变（135度凤凰体育平台 ，＃cd6600，＃0067cd 20像素，＃cd6600 40像素）；

颜色节点

颜色节点是沿渐变轴放置的点。定义格式如下：

= [

| ]

首先指定颜色（颜色），然后使用百分比值或长度值指定位置。百分比值对应于轴长的百分比，0％代表起点，100％代表终点；长度值是指从轴的起点到终点算出的值。颜色节点通常位于起点和终点之间，但这不是必需的。轴可以在两个方向上无限延伸，并且颜色节点可以放置在直线上的任何位置。

在每个颜色节点处，该线显示为颜色节点的颜色。在两个颜色节点之间，该线呈现了从一种颜色到另一种颜色的过渡。在第一个颜色节点之前，该线显示为第一个颜色节点的颜色，在最后一个节点之后YOBET体育 ，该线显示为最后一个颜色节点的颜色。

以下步骤定义了处理颜色节点列表的行为。应用这些规则后，所有颜色节点将具有清晰的位置：

如果多个颜色节点具有相同的位置，则它们会产生从一种颜色到另一种颜色的急剧过渡。从效果的角度来看，它是从一种颜色到另一种颜色的突然变化。

为了理解上述规则，以下是一些示例来帮助您理解：

我相信您已经清楚地了解了颜色节点的含义。接下来，我们将使用颜色节点制作条纹背景。

条纹背景

在解释颜色节点时，我们提到“如果多个颜色节点处于相同位置，它们将从一种颜色过渡到另一种颜色。从效果的角度来看，它是从一种颜色过渡到另一种颜色。突然出现一种颜色更改为另一种颜色”。根据此定义，我们只需要将多个颜色节点设置到同一位置即可轻松获得条纹背景效果。让我们看一下如何产生各种条纹背景。

水平条纹背景

将两种颜色的颜色节点位置设置为相同以产生条纹背景，如下所示：

水平条纹背景

背景：线性渐变（＃cd6600 50％，＃0067cd 50％）；

使用背景重复机制秒速快三 ，我们可以创建更多条纹：

水平条纹背景

背景：线性渐变（＃cd6600 50％，＃0067cd 0);

背景大小：100％20％；

通过这种方式，我们将整个背景分为10个条纹，但是每个条纹的高度不必相同，只要更改比例，就可以做到：

水平条纹背景

背景：线性渐变（＃cd6600 80％，＃0067cd 0);

background-size：100％20px;

当然，我们也可以指定多种颜色：

水平条纹背景

背景：线性渐变（＃cd6600 3 3. 3％，＃0067cd 0，＃0067cd 6 6. 6％，＃00cd66 0)；

background-size：100％30px;

或创建分界线效果：

背景：线性渐变（rgba（0,0,0，。5) 1px，#fff 1px）;

background-size：100％3px;

也许您还有其他想法，请快点尝试。

垂直条纹背景

垂直条纹背景相似，但是您需要更改width和height的设置，如下所示：

垂直条纹背景

背景：线性渐变（向右，＃cd6600 50％，＃0067cd 0)；

背景大小：20％100％;

其他方法类似于水平方法，您可以自己尝试。

对角条纹背景

我们可以使用重复的线性渐变轻松创建对角线条纹背景：

对角条纹背景

背景：重复线性梯度（60度，＃cd6600，＃cd6600 10％，＃0067cd 0，＃0067cd 20％）；

很容易指定多种颜色：

对角条纹背景

背景：重复线性梯度（60度，＃cd6600AG真人 ，＃cd6600 10％，＃0067cd 0，＃0067cd 20％，＃00cd66 0，＃00cd66 30％）；

但是在实际应用中，使用过多的背景色通常不是一件好事。因此，在更一般的情况下，您可以考虑使用背景，但是会改变颜色的阴影：

对角条纹背景

背景：重复线性渐变（45度，RGBA（0,103,205，0. 5)，RGBA（0,103,205，0. 5) 10％，RGBA（0,103,205，0. 3) 0，RGBA （0,103,205，0. 3) 20％）;

这一切是否激发了您的灵感，请快快尝试一下。