1、线性渐变（Linear Gradients）
线性渐变可以沿着一跟轴线改变颜色，用法如下：
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<style type="text/css">
div{
width: 500px;
height: 400px;
background: linear-gradient(red, yellow);
margin: 0 auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果如下：
在这个例子中，我做了一个由红到黄的渐变，可以看到在不指定渐变方向的情况下，默认渐变方向是从上到下。
在linear-gradient方法内添加to left，就可以把方向改为从右往左
同样的，将to left 改为to left bottom就可以把渐变方向改为从右上到左下。
除了指明方向外，还可以设定角度，将to left bottom 改为90deg，效果如下：
可以看到渐变方向变为了由左向右，角度的计算是逆时针计算。
除了改变渐变角度，还可以改变渐变的颜色区域，举个例子：
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<style type="text/css">
div{
width: 500px;
height: 400px;
background: linear-gradient(90deg, red 50%, yellow 90%);
margin: 0 auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果如下：
可以看到红色的范围明显变大，为了达到这个效果我们在red和yellow后面分别添加了“50%”和“90%”，意思是，从渐变轴线的0到50%的长度上为红色，从50%到90%的长度上为红黄过渡，90%之后为黄色。若是我们将两个数值改为同一个值，那么渐变效果将消失。效果如下：
2、径向渐变（Radial Gradients）
由内向外沿着径向圆形（正圆/椭圆）渐变。用法基本与线性渐变一致。举个例子：
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<style type="text/css">
div{
width: 500px;
height: 400px;
background: radial-gradient(red, yellow);
margin: 0 auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果如下：
默认状态下是椭圆渐变，如想圆形渐变则可以在red前添加“circle”，效果如下：
除此之外我们还可以指定范围的参照，举个例子：
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<style type="text/css">
div{
display: inline-block;
width: 300px;
height: 100px;
margin: 0 auto;
}
.one{
background: radial-gradient(closest-side circle, red, yellow);
}
.two{
background: radial-gradient(closest-corner circle, red, yellow);
}
.three{
background: radial-gradient(farthest-side circle, red, yellow);
}
.four{
background: radial-gradient(farthest-corner circle, red, yellow);
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</body>
</html>
效果如下：
