线性渐变

渐变
1.什么是渐变？
两种或者多种颜色间平滑过渡的效果
2.分类
1.线性渐变
2.径向渐变
3.线性渐变
语法： background-image:linear-gradient
background-image: linear-gradient(direction, color-stop1, color-stop2, …);
线性渐变
angle: :方向或角度 表示渐变的方向
关键字
1.to top 从下往上渐变
2.to left 从右往左渐变
3.to bottom 从上往下渐变
4.to right 从左往右渐变
角度
0deg~360deg
0 = to top
90 = to right
180 = to bottom
270 = to left
颜色1，颜色2，颜色3。。。。

色标：，表示每个颜色值，及其出现的位置，多个色标之间用‘，’进行分割
如果不写色标的位置每个将平分元素的区域

#grad {
/ 标准的语法 /
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

**线性渐变 - 对角

你可以通过指定水平和垂直的起始位置来制作一个对角渐变。

下面的实例演示了从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色：

实例
从左上角到右下角的线性渐变：

#grad {
height: 200px;
background-image: linear-gradient(to bottom right, red, yellow);
}
**

使用透明度（transparent）
CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。

为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。