以前我们如果想要做到一个颜色到另一个颜色的渐变（Gradients）效果，需要用ps之类的应用程序做出一张背景图片，然后放到元素上，这样子不仅麻烦，而且不利于代码的维护，当用户界面大小发生改变时，显示效果也不好
CSS3提供给了我们一种渐变绘制方式，这样我们就不需要去下载文件之类的，当界面发生改变之后，由于是浏览器去绘制的，显示效果也比较好
线性渐变（Linear Gradients）向上 | 向下 | 向左 | 向右 | 对角线
语法：
background: linear-gradient(direction, color-stop1, color-stop2, ...);
默认从上到下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CSS3</title>
<link rel="stylesheet" href="">
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
margin: 20px;
width: 100px;
height: 100px;
padding: 20px;
background: linear-gradient(red, blue);
}
</style>
</head>
<body>
<div></div>
</body>
</html>从左向右
对角 （从右上角到左下角）
如果你不想使用这些方向，也可以使用自己的定义的角度
语法：
background: linear-gradient(angle, color-stop1, color-stop2);
角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。
但是，请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。
我们发现red是从底部开始，顺时针走了一圈，这样记比较好记一点
需要注意的是：
1，颜色不仅只可以填写两个
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CSS3</title>
<link rel="stylesheet" href="">
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
margin: 20px;
width: 500px;
height: 100px;
padding: 20px;
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style>
</head>
<body>
<div></div>
</body>
</html>2，也可以对透明度进行渐变
--------------------------------------------------------------------------------------------------
径向渐变
径向渐变由它的中心定义。
为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
语法：
background: radial-gradient(center, shape size, start-color, ..., last-color);
设置形状：
它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
有点不太明显，可以比较一下顶部ellipse的红色区域碰到了顶部，circle没有，
径向渐变用的比较少，如果还想有其他了解，可以看下面的参考文章
---------------------------------------------------------------------------
