线性渐变的主要实现过程是颜色沿着某一条直线进行过渡
比较常见的方向有：
水平：从左到右、从右到左
垂直：从上到下、从下到上
对角线方向：左上到右下 左下到右上 右上到左下 右下到左上
样式的代码
如下图，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，共同进步。
网友评论