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