渐变分为线性渐变和径向渐变。本文只讲线性渐变。
线性渐变
:变化根据一条线进行变化。
径向渐变
:由一个点向外进行渐变。
1.写法
background: linear-gradient(color1,color2);
渐变方向默认从上到下
2.改变渐变方向
1)通过设置渐变终点
background: linear-gradient(direction,colro1,color2);
其中,direction即为设置渐变终点。(to ….)
【从左到右,就将direction写成to right】
【左下角到右上角,将direction写成to right top】(看图可以看出是从左下角到右上角,并不是按照45度的线性进行变化)
2)通过设置渐变线起始角度
background: linear-gradient(angle,color1,color2);
其中,angle即为角度。是以六点为起始,进行顺时针计算确定渐变的起始位置。
【左上角十点半,135度】
【170度】
- 可以看出,当设置角度后,无论正方形的盒子,还是长方形的,渐变的角度是一样的。也就是说,通过角度设置渐变的,一个是设置了起始点的位置,再一个是设置了渐变线的角度。
3.可设置多个颜色
background: linear-gradient(color1,color2,color3,color4….);
身为一个专业的美工,怎能不做一个好看的渐变?
4.设置颜色起始位置
通过设置颜色的起始位置,可以设置颜色占比,也可以设置渐变重复,还可以设置渐变起始点。
background: linear-gradient(color1 length/percentage,color2 length/percentage,color3 length/percentage);
1)length/percentage 都是颜色起止位置,length表示长度,percentage表示百分比
需要说明一下的是,渐变,每个颜色的起止位置为一个固定的点,而不是一段距离。因为,只有在那个固定的点的位置才是最纯正的该颜色,而无论向两侧任何方向变化,都不再是最纯的颜色了。当未设置颜色起止点时,即为均匀渐变,即第一个颜色起始位置为0%,第二个颜色的起止位置为50%,第三个为100%。
【均匀渐变,第二个颜色起始位置在中间】
【将第二个颜色起始位置进行改变】
2)设置颜色渐变重复
第一个和第二个盒子的区别在于一个用了百分比,一个用了长度。
第一、二个和第三个的区别在于,第三个前面使用了
repeating-linear-gradient();
所以,当第一个和第二个盒子达到第三个颜色的结束位置时,剩下的空间都时第三个颜色。而box3,因为有了repeating,当第三个颜色结束时,剩下的地方会重新渐变。
5.渐变透明
使用
rgba()
函数来定义颜色
rbga(x,y,z,k) 其中,x,y,z三个数分别取值0-255。k取值0-1,0表示透明,1表示不透明。