先看一个demo,简单认识一下linear-gradient
background: linear-gradient(red, blue);
demo中可以看到背景色是由红色渐变为蓝色。 linear-gradient有三个参数：
第一个参数：可以是角度(deg),方向(left,right,top,bottom),旋转(turn)，默认为方向bottom
第二个参数：渐变的开始颜色 结束位置。
第三个参数：渐变的结束颜色 结束位置。
demo中开始颜色red，结束颜色blue，无结束位置开始颜色默认50%，结束颜色默认100%
除了上面的渐变，我们也可以设置某个区域为一种颜色
.box{
width: 300px;
height: 200px;
background: linear-gradient(red 50%, blue 50%);
}
当然了，渐变的颜色也可以是多个，比如
.box{
width: 300px;
height: 200px;
background: linear-gradient(red, blue, green);
}
.box{
width: 300px;
height: 200px;
background: linear-gradient(red 33%, blue 33%, blue 66%, green 66%);
}
想要颜色直接过渡只需要将上一个颜色的结束位置作为下一个颜色的开始位置即可
渐变作为背景可以做些什么呢？
- css利用渐变画稿纸
- css利用渐变画棋盘，渐变色字体
- css字体颜色渐变效果
{
/*主要就是下面的三个css属性*/
color: transparent;
-webkit-background-clip: text;
background-image: linear-gradient(red,blue );
}
