CSS3线性渐变

渐变是从一种颜色逐渐蜕变到另一种颜色。线性渐变就是沿着一根轴线（水平，垂直或某个角度）改变颜色，从起点到终点颜色进行颜色渐变。

线性渐变

创建线性渐变你需要指定渐变的轴线和沿轴线变化的多种颜色，颜色将按与轴线垂直的方向被绘制，多种颜色间将实现渐变平滑过渡。具体语法如下：

1	linear-gradient(gradient_line, color1, color2, ...);

gradient_line指定了渐变线，后面跟随多种沿轴线变化的颜色

轴线

轴线可以省略，这时，它使用默认值”to bottom”，指定轴线可以使用两种方式：

使用角度
“0 deg”表示垂直向上，然后按顺时针方向增加角度，“90deg”指向右边。
使用常量
to top：向上 0deg
to right：向右 90deg
to bottom：向下 180deg
to left：向右 270deg

常量可以组合使用，如”to top left”就是到左上角。

线性渐变的例子

垂直渐变

css代码：background-image: linear-gradient(#cd6600, #0067cd)
你也可以指定轴线，下面的几种方式都可以达到和上面一样的效果

background: linear-gradient(to top, #0067cd, #cd6600);
background: linear-gradient(to bottom, #cd6600, #0067cd);
background: linear-gradient(180deg, #cd6600, #0067cd);
background: linear-gradient(to bottom, #cd6600 0%, #0067cd 100%);

斜角渐变

css代码：background-image: linear-gradient(135deg, #cd6600, #0067cd)
也可以指定负角度，如下：
background: linear-gradient(-45deg, #0067cd, #cd6600);
多色渐变

css代码：background-image: linear-gradient(#6600cd, #cd6600 20%, #00cd66)
多色斜角渐变

css代码：linear-gradient(to top right, #cd6600, white, #0067cd)

重复线性渐变

重复线性渐变就是线性渐变的重复版本 repeating-linear-gradient ，当你定义好了你的线性渐变方式后，重复线性渐变会基于轴线不断的重复你的渐变方式，直到占满整个背景。使用重复线性渐变的关键是你需要定义好颜色节点，需要注意的是你定义的最后一种颜色将和第一种颜色相接在一起，处理不当将导致颜色的急剧变化。

重复线性渐变的例子

css代码：background-image: repeating-linear-gradient(#cd6600, #0067cd 20%, #cd6600 40%)

css代码：background-image: repeating-linear-gradient(90deg, #cd6600, #0067cd 20%, #cd6600 40%)

css代码：background-image: repeating-linear-gradient(135deg, #cd6600, #0067cd 20%, #cd6600 40%)

颜色节点

颜色节点是沿着渐变轴线被放置的点，定义格式如下：
= [ | ]
首先指定颜色，然后指定位置，使用百分比值或者长度值表示。百分比值对应轴线长度的百分比，0%表示起始点，而100%表示结束点；长度值指从轴线的起始点向结束点方向计算的数值。颜色节点通常放置在起始点和结束点之间，但不是必须的，轴线可以在两个方向上无限扩展，而颜色节点可以放置在线上的任何位置 。
在每个颜色节点，线呈现为颜色节点的颜色。在两个颜色节点之间，线呈现为从一种颜色过渡到另一种颜色过度过程。在第一个颜色节点之前，线呈现为第一个颜色节点的颜色，而在最后一个节点，线呈现为最后一个颜色节点的颜色。

以下步骤定义了处理颜色节点列表的行为，应用这些规则后，所有颜色节点都将有一个明确的位置

如果第一个颜色节点没有指定位置，设置它的位置为0%，如果最后一个节点没有指定位置，设置其为100%
如果一个颜色节点的位置小于了在它之前的任意一个颜色节点的位置，设置其位置等于它之前所有的颜色节点位置的最大的位置
如果存在一些颜色节点没有指定位置，那么，为那些相邻的没有指定颜色节点，设置它们的位置使他们平均占据空间。
- 如果多个颜色节点有相同的位置，它们产生一个从一个颜色到另一个颜色的急剧的转换。从效果来看，就是从一种颜色突然改变到另一种颜色。

例子：

css代码：


        background-image: linear-gradient(red, white 20%, blue)
        相当于
        background-image: linear-gradient(red 0%, white 20%, blue 100%)

css代码：


        background-image: linear-gradient(red 40%, white, black, blue)
        相当于
        background-image: linear-gradient(red 40%, white 60%, black 80%, blue 100%)

css代码：


        background-image: linear-gradient(red -50%, white, blue)
        相当于
        background-image: linear-gradient(red -50%, white 25%, blue 100%)

css代码：


        background-image: linear-gradient(red 80px, white 0px, black, blue 100px)
        相当于
        background-image: linear-gradient(red 80px, white 80px, black 90px, blue 100px)

条纹背景

在讲解颜色节点时，我们提到“如果多个颜色节点有相同的位置，它们产生一个从一种颜色到另一种颜色的急剧的转换。从效果来看，就是从一种颜色突然改变到另一种颜色。”根据这个定义，我们只需要将多个颜色节点设置到同一个位置，就可以轻易的得到条纹背景效果。

水平条纹背景

将两种颜色的颜色节点位置设置成一样就可以产生条纹背景，如下：

css代码：


        background-image: linear-gradient(#cd6600 50%, #0067cd 50%)

利用背景的重复机制，我们可以创造出更多的条纹

css代码：


        background-image: linear-gradient(#cd6600 50%, #0067cd 50%);
        background-size: 100% 20%;

这样我们就把整个背景划分为了10个条纹，但每个条纹的高度并不一定要一样，只要改变比例就可以做到：

css代码：


        background-image: linear-gradient(#cd6600 80%, #0067cd 80%);
        background-size: 100% 20%;

css代码：


        background-image: linear-gradient(#cd6600 33.3%, #0067cd 0, #0067cd 66.7%, #00cd66 0);
        background-size: 100% 20%;

或者创建分割线效果：

css代码：


        background-image: linear-gradient(rgba(0, 0, 0, .5) 1px , #fff 1px);
        background-size: 100% 3px;

垂直条纹背景

垂直条纹背景类似，只是需要转化一下宽和高的设置方式

css代码：


        background-image: linear-gradient(to right, #cd6600 50%, #0067cd 0);
        background-size: 20% 100%;

对角条纹背景

css代码：


        background-image: repeating-linear-gradient(60deg, #cd6600, #0067cd 10%, #0067cd 0, #0067cd 20%);

可以指定多种颜色:

css代码：


        background-image: repeating-linear-gradient(60deg, #cd6600, #cd6600 10%, #0067cd 0, #0067cd 0, #0067cd 20%, #00cd66 0, #00cd66 30%);

css代码：


        background-image: repeating-linear-gradient(60deg, #cd6600, #cd6600 10%, #0067cd 0, #0067cd 0, #0067cd 20%, #00cd66 0, #00cd66 30%);