渐变色背景通过background-image指定颜色来设定，一起看看吧！
渐变的方向
一般我们可以指定以下几种渐变方向：
示例
<div id="grad1"></div>
to left
#grad1 {height: 200px;background-color: red; /* 不支持线性的时候显示 */background-image: linear-gradient(to left, red , yellow);}
我们发现linear-gradient可以指定线性渐变，什么是线性渐变？就是颜色在一条直线的方向上进行渐变。第一个参数指定了渐变的方向，后面的参数是沿着渐变的方向不断变动的颜色类型。
to right
#grad1 {height: 200px;background-color: red; /* 不支持线性的时候显示 */background-image: linear-gradient(to right, red , yellow);}
to top
#grad1 {height: 400px;width: 100px;background-color: red; /* 不支持线性的时候显示 */background-image: linear-gradient(to top, red , yellow);}
to bottom
#grad1 {height: 400px;width: 100px;background-color: red; /* 不支持线性的时候显示 */background-image: linear-gradient(to bottom, red , yellow);}
to bottom right
#grad1 {height: 200px;width: 200px;background-color: red; /* 不支持线性的时候显示 */background-image: linear-gradient(to bottom right, red , yellow);}
to bottom left
#grad1 {height: 200px;width: 200px;background-color: red; /* 不支持线性的时候显示 */background-image: linear-gradient(to bottom left, red , yellow);}
to top right
#grad1 {height: 200px;width: 200px;background-color: red; /* 不支持线性的时候显示 */background-image: linear-gradient(to top right, red , yellow);}
to top left
#grad1 {height: 200px;width: 200px;background-color: red; /* 不支持线性的时候显示 */background-image: linear-gradient(to top left, red , yellow);}
使用角度也可以指定方向，使用角度可以更加灵活地控制方向，也可以指定20deg，并非固定的方向。
示例
<div id="grad1" style="text-align:center;">0deg</div><br>
<div id="grad2" style="text-align:center;">90deg</div><br>
<div id="grad3" style="text-align:center;">180deg</div><br>
<div id="grad4" style="text-align:center;">-90deg</div>
角度指定渐变方向样式
#grad1 {height: 100px;background-color: red; /* 浏览器不支持的时候显示 */background-image: linear-gradient(0deg, red, yellow); }#grad2 {height: 100px;background-color: red; /* 浏览器不支持的时候显示 */background-image: linear-gradient(90deg, red, yellow); }#grad3 {height: 100px;background-color: red; /* 浏览器不支持的时候显示 */background-image: linear-gradient(180deg, red, yellow); }#grad4 {height: 100px;background-color: red; /* 浏览器不支持的时候显示 */background-image: linear-gradient(-90deg, red, yellow); }
效果
渐变色的渐变比例
通过指定百分比，指定渐变色使用的范围。
#grad1 {height: 200px;background-color: red; /* 不支持线性的时候显示 */background-image: linear-gradient(to right, red 0%, yellow 30%);}
这里指定的百分比指的是，对应的颜色在渐变方向上的百分之多少的位置开始渲染。
循环渐变色
repeating-linear-gradient，一般用不到，感觉好丑啊，就是重复使用渐变色进行填充
#grad2 {height: 200px;background-color: red; /* 浏览器不支持的时候显示 */background-image: repeating-linear-gradient(45deg,red,yellow 7%,green 10%); }
