css的三种渐变
css的世界不容小觑，一个css渐变都能玩出很多种花样，最近借助mdn复习了一下渐变的知识，也算是重新认识了css的渐变。
1.线性渐变
一个简单的线性渐变即为在一个区域内有一种颜色过渡到另一种颜色。
在css中的写法为：background: linear-gadient( color1，color2 );
eg:
background: linear-gradient( cyan, black);
即为从蓝绿色过渡到黑色，此时的效果图为：
默认情况下为自上而下进行渐变，我们可以通过方向关键字或者是角度值（deg）对渐变方向进行设置
语法格式为 background: linear-gadient( direction, color1，color2 );
eg:
从左向右 background: linear-gradient(to right, cyan, black);
从左上至右下 background: linear-gradient(to right bottom, cyan, black);
角度90deg（以自下而上为0deg，顺时针度数增加）
background: linear-gradient( 90deg, cyan, black);
以上面的例子为例，默认情况下，在这种过渡里，颜色都是通过浏览器计算颜色的数量进行均匀过渡
eg：
background: linear-gradient(to right, pink, cyan, black);
而在其中设置百分比或像素长度，以逗号分隔在括号内，可以调节两颜色间渐变中心的位置，例如
eg：
background: linear-gradient(to right, pink, 50%, cyan, black);
即意为在元素的50%位置上，粉色与蓝绿色的渐变到达渐变中心
另外一种设置渐变位置的方法是将数字紧跟着写在颜色后面
eg：
background: linear-gradient(to right, pink 50%, cyan, black);
以这段代码为例，可解释为粉色在50%的地方开始向下一种颜色过渡
如果紧跟着颜色后面的是两个数即表明在该数值区域内颜色为纯色，多个区域的纯色范围划定以后，期间没有设定的范围用来进行过渡
eg:
background: linear-gradient(to right, pink 0 20px, cyan 100px 70%, black 75% 100%);
这句的意思即：从左向右进行过渡，在元素的起始位置到20px位置范围内颜色必定为粉色，在元素的100px位置到元素的70%的位置必须是蓝绿色，至于之间没有说明的20-100px的范围内，就交给浏览器实现过渡吧。
根据这种数字的写法，易知当一个颜色区域的起点为前一个颜色的终点时，可以得到一个清晰的颜色界限
即
eg：background: linear-gradient(to right, pink 33%, cyan 33% 70%, black 70%);
渐变支持透明色(transparent)以及rgba颜色，故可以在background中与图片相叠加(字上而下堆叠，写在最前面的放在最上面)，故可实现下面的效果
background: linear-gradient(to right, transparent, rgba(0, 0, 0, .8)), url(../../zongking.png) top center;
即知有如上的方法和性质，使用多种颜色甚至可以实现如下效果
eg:
background: linear-gradient(30deg, rgba(255, 0, 0, .8), rgba(255, 0, 0, 0) 70.71%),
linear-gradient(150deg, rgba(0, 255, 0, .8), rgba(0, 255, 0, 0) 70.71%),
linear-gradient(270deg, rgba(0, 0, 255, .8), rgba(0, 0, 255, 0) 70.71%);`
以及各种条纹形式：
background: linear-gradient(to right bottom, *#000* 20%, *#fff* 20% 40%, *#000* 40% 60%, *#fff* 60% 80%, *#000* 80% 100%);
当然，上面的条纹比较少，因为我单纯想拿来示范一下，真正实现条纹并非是直接用线性渐变，这就涉及到一个新的线性渐变函数repeating-linear-gradient
该渐变函数可以根据以定义的渐变实现重复渐变
eg：
background: repeating-linear-gradient(to right bottom, *#000* 0 10px, *#fff* 10px 20px);
有这个条纹做出的东西当然远远不知这个，发散开思维就能想到各种条纹，简直被这个渐变给包揽了。