渐变分为线性渐变和径向渐变。本文只讲线性渐变。
线性渐变：变化根据一条线进行变化。
径向渐变：由一个点向外进行渐变。
1.写法
background: linear-gradient(color1,color2);
渐变方向默认从上到下
2.改变渐变方向
1）通过设置渐变终点
background: linear-gradient(direction,colro1,color2);
其中，direction即为设置渐变终点。（to ....)
【从左到右，就将direction写成to right】
【左下角到右上角，将direction写成to right top】(看图可以看出是从左下角到右上角，并不是按照45度的线性进行变化）
2）通过设置渐变线起始角度
background: linear-gradient(angle,color1,color2);
其中，angle即为角度。是以六点为起始，进行顺时针计算确定渐变的起始位置。
【左上角十点半，135度】
【170度】
可以看出，当设置角度后，无论正方形的盒子，还是长方形的，渐变的角度是一样的。也就是说，通过角度设置渐变的，一个是设置了起始点的位置，再一个是设置了渐变线的角度。
3.可设置多个颜色
background: linear-gradient(color1,color2,color3,color4....);
身为一个专业的美工，怎能不做一个好看的渐变？
4.设置颜色起始位置
通过设置颜色的起始位置，可以设置颜色占比，也可以设置渐变重复，还可以设置渐变起始点。
background: linear-gradient(color1 length/percentage,color2 length/percentage,color3 length/percentage);
1）length/percentage 都是颜色起止位置，length表示长度，percentage表示百分比
需要说明一下的是，渐变，每个颜色的起止位置为一个固定的点，而不是一段距离。因为，只有在那个固定的点的位置才是最纯正的该颜色，而无论向两侧任何方向变化，都不再是最纯的颜色了。当未设置颜色起止点时，即为均匀渐变，即第一个颜色起始位置为0%,第二个颜色的起止位置为50%，第三个为100%。
【均匀渐变，第二个颜色起始位置在中间】
【将第二个颜色起始位置进行改变】
2）设置颜色渐变重复
第一个和第二个盒子的区别在于一个用了百分比，一个用了长度。
第一、二个和第三个的区别在于，第三个前面使用了repeating-linear-gradient();
所以，当第一个和第二个盒子达到第三个颜色的结束位置时，剩下的空间都时第三个颜色。而box3，因为有了repeating，当第三个颜色结束时，剩下的地方会重新渐变。
5.渐变透明
使用 rgba() 函数来定义颜色
rbga(x,y,z,k) 其中，x,y,z三个数分别取值0-255。k取值0-1，0表示透明，1表示不透明。