渐变这个东西看起来很炫酷，高大上，但对于小白的我，一看到代码，瞬间。。。
菜鸟教程对渐变的使用是这样的：
好像还看得懂，我觉得我可以！
然后找一找大佬们的小Demo（https://blog.csdn.net/huantuo4908/article/details/70209224）
这是什么东西？渐变怎么还能搞成条纹背景用了？
然后再看看更复杂点的代码（https://leaverou.github.io/css3patterns/#）
只能用表情包来形容此刻心情
开玩笑，再复杂也得学啊！之后我又自己进行简单试验，发现了渐变的一些技巧。
渐变语法
以线性渐变为例，菜鸟教程中对渐变的语法使用是这样的：
background-image: linear-gradient(direction, color-stop1, color-stop2, …);
可以看出渐变是基于background-image属性创建的，也就是说，渐变可以看做是一个background-image，也就是适用所有的background属性。
通常在设置背景的时候，而背景图片为简单的条、线以及其他简单的图片且重复的图片时，我们会使用一个小切片设置为背景通过repeat进行填充。
而现在使用渐变来写背景，足足可以省掉一个背景图片的文件！
简单实例分析
#grad1 {
height: 200px;
background-color: red; /* 不支持线性的时候显示 */
background-image: linear-gradient(to bottom right, red , yellow);
}
从菜鸟教程的小实例和语法中可以简单的看出，linear-gradient函数包含两个主要参数，渐变方向和颜色。
渐变方向(direction)
实例中的direction是to bottom right
此处的渐变方向可以看出是右下，方向可以写一个或者两个，并用to开头，而起点就是方向的相对方向，比如这个实例的渐变方向是右下，而它的起点就是左上。
方向也可以省略，即为默认的从上向下的方向。
颜色(color-stop*)
颜色即每块的相应颜色，可以设置多个，依次用逗号隔开，按照渐变方向的顺序排序。
例如这个彩虹的实例：
#grad1 {
height: 55px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* 标准的语法（必须放在最后） */
}
并且颜色后还可以跟一个参数。
而这个参数根据语法的解释就是停止点？
经过我一系列的测试，终于明白了这个参数是用来干什么的了！
首先先看这段css：
竟然神奇的发现渐变消失了，竟然变成了像大佬们写的背景那样！这个我先放到下一段再说。
这段看不出这个参数到底是干啥的，但通过下面这个动图，我们来不断增加red后的参数，就会发现神奇的效果！
我发现了神奇的现象，当red的参数大于50px时即大于green的参数(50px)时，红色开始出现了渐变！
此时我明白了，这个参数就是这个颜色的距离起点的距离！
就像这张图片解释的一样，红色实际的区域实在距离起点（即顶端）70px的位置所框的范围，而绿色是从起点到50px所框的范围，而所谓的渐变就是在两块区域间所实现的的渐变！
那么前面没有出现渐变而直接由绿色和红色拼的条条也可以轻松理解了！
为了好理解，我把绿色加长到70px，也就是说，因为绿色与红色重叠了，没有可以渐变的空隙，就会出现这种拼接的效果
运用渐变制作背景小实例
我用一个简单的斑马线背景来做演示：
.bg{
height: 100vh;
width: 100vw;
background-image: linear-gradient(#888888 50%,#ffffff 50%);
background-size: 50px 50px;
}
此时又有了一个新问题：background-size是做什么用的呢？
因为之前说过，渐变是使用在background-image中的，也就是说你可以把渐变看做是下面这样：
background-image: url("linear-gradient.jpg");
所以当我们添加背景图片之后就是这个样子，全屏只有两块区域：
再给他设置一个大小(background-size)为50px*50px，就将它进行了缩小，每个灰白行大小50px。
那么按照这个道理，页面不就应该只有一个50px*50px的缩小版吗？
但是因为background-repeat的默认值是repeat，背景会把这个小块无限填充，所以就会呈现出斑马线这样的条纹背景！
总结
这就是本文全部内容，本文只是简单的介绍一下渐变的详细参数及使用，以及简单的运用渐变来绘制背景图片，并且只是介绍了渐变其中一个线性渐变，另一个为径向渐变，后者与前者原理和使用方法相似，只是在方向上前者是线性的后者是运用的角度，如果想要深入了解可以查阅相关文档与文章。
如果想要深入学习渐变的背景制作，可以看一下文章开头的两个链接：
CSS3中惊艳的gradient：https://blog.csdn.net/huantuo4908/article/details/70209224
CSS3 Patterns Gallery：https://leaverou.github.io/css3patterns/#
前者是CSDN一位大佬的关于gradient的深入文章，后者是国外大佬使用渐变制作背景的CSS代码（网络问题可能需要科学上网）。
希望本文对你有所帮助！
