一、线性渐变的简介
1、通过渐变可以设置一些复杂的背景颜色,可以设置从一个颜色向其他颜色过渡的效果,所谓线性渐变就是渐变沿着直线发生变化。
2、渐变是图片,需要通过background-image来设置。
二、四种渐变情况介绍
1、默认情况(渐变方向向下)
background-image: linear-gradient(red ,yellow);
代码如下:
效果呈现:
2、指定渐变方向
第一种:通过right、left、top、bottom等方向词来指定渐变方向
background-image: linear-gradient(to right,red ,yellow);
代码如下:
效果呈现:
第二种:通过度数来指定渐变方向
background-image: linear-gradient(45deg,red ,yellow);
代码如下:
效果呈现:
第三种:通过圈数来指定渐变方向
background-image: linear-gradient( 1.5turn ,red ,yellow);
代码如下:
效果呈现:
3、指定分布情况
background-image: linear-gradient(red 40px , yellow 90px);
代码如下:
效果呈现:
4、可以平铺的线性渐变
background-image: repeating-linear-gradient(red 40px,yellow 90px);
代码如下:
效果呈现: