CSS3线性渐变

CSS3线性渐变可以让你在两个或多个指定的颜色之间显示平稳的过渡。

线性渐变（Linear Gradients）

创建一个线性渐变，必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。方向可以是上下、左右或者对角方向，你也可以设置一个起点和一个方向（或一个角度）。

语法：

background: linear-gradient(direction, color-stop1, color-stop2, ...);  

1）线性渐变 - 从上到下（默认情况下）

下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：

div { 
  background: linear-gradient(red, blue); 
}

2）线性渐变 - 从左到右

下面的实例演示了从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：
div {
background: linear-gradient(to right, red , blue);
}

3）线性渐变 - 对角

下面的实例演示了从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色：
div {
background: linear-gradient(to bottom right, red , blue);
}

4）使用角度
你可以定义一个角度，而不用预定义方向。

角度是指水平线和渐变线之间的角度，逆时针方向计算。即0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

div { 
  background: linear-gradient(180deg, red, blue); 
}