css线性渐变的小白之路

线性渐变的主要实现过程是颜色沿着某一条直线进行过渡

比较常见的方向有：

水平：从左到右、从右到左   

垂直：从上到下、从下到上

对角线方向：左上到右下  左下到右上  右上到左下 右下到左上 

样式的代码

如下图，linear-gradient至少要有三个参数，第一个表示方向（比如box1就是指从右到左，从to后面的方向的反方向到to的方向，后面两个参数表示简便的色彩过度范围，比如box1中就是有浅蓝到深蓝进行的过渡）。

background-image: linear-gradient(to right, lightblue,darkblue);

background-image: linear-gradient(to left, lightblue,darkblue);

background-image: linear-gradient(to bottom, lightgreen,darkgreen);

background-image: linear-gradient(to top,lightgreen,darkgreen);

还有一种方式就是利用角度进行渐变

原理则是依据中学数学学过的角度大小

角度对应图

background-image: linear-gradient(-45deg,yellow,red);

background-image: linear-gradient(30deg,yellow,red);

background-image: linear-gradient(120deg,yellow,red);

background-image: linear-gradient(225deg,yellow,red);

当然，颜色的参数不仅仅只是限制为两个，可以有多个颜色，这样的话色彩会更加丰富

background-image: linear-gradient(45deg,red, pink 20%, purple);

多个颜色渐变的截图

好了，线性渐变的理解到此为止了，写的很基础，希望css小白们能喜欢，也欢迎留言，大家一起讨论学习css，共同进步。