颜色渐变

background:linear-gradient(linear ,10% 10%，100% 100%，

color-stop(0.14,rgb(255,0,0)),

color-stop(0.5,rgb(255,255,0)),

color-stop(1,rgb(0,0,255)) );

第一个参数：表示的是渐变的类型linear线性渐变

第二个参数：分别对应x，y方向渐变的起始位置

第三个参数：分别对应x，y方向渐变的终止位置

第四/五/N个参数：设置渐变的位置及颜色

第二种写法：这种写法比较简单，而且效果比较自然

background:linear-gradient(linear, 0 0, 0 100%, from(＃2074af), to(＃2c91d2));

第一个参数：表示的是渐变的类型

linear线性渐变

第二个参数：分别对应x，y方向渐变的起始位置

第三个参数：分别对应x，y方向渐变的终止位置

第四个参数：设置了起始位置的颜色

第五个参数：设置了终止位置的颜色

<p>从上到下</p>
4     <div style="width: 200px;height: 200px;background: linear-gradient(to bottom,red,blue);"></div>
5     <p>从左到右</p>
6     <div style="width: 200px;height: 200px;background: linear-gradient(to right,red,blue);"></div>
7     <p>对角线(左上到右下)</p>
8     <div style="width: 200px;height: 200px;background: linear-gradient(to bottom right,red,blue)"></div>