线性渐变

一、线性渐变的简介

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);

代码如下：

效果呈现：