css渐变是由一个函数生成的图像
linear-gradient：线性渐变
radial-gradient：径向渐变
linear-gradient
定义：创建一条沿直线前进的颜色带；这条直线可以是任意方向，只要指定角度即可
语法：linear-gradient([ | to ], )
angle:指定渐变方向
side-or-corner:描述渐变线的起始点位置，默认为：to bottom
color-stop list:由一个color值组成，并且跟随一个可选的终点位置
掌握线性渐变，主要掌握三个知识点
- 渐变方向/角度
- 颜色终止点的含义
- 颜色渐变中点
下面就从这三个方面进行讲解
渐变方向/角度
渐变的方向默认是从上到下，但是可以通过关键字或者角度来指定
关键字
top， right，bottom，left
-
to top | right|bottom|left：从下到上，从左到右，从上到下，从右到左
其等价于以下角度
0deg，90deg，180deg，270deg
-
to top right | top left | bottom right | bottom left
其等价于以下角度
45deg，-45deg，135deg，-135deg
角度
以上图为例，颜色是以渐变线进行渐变的，角度为正，渐变线顺时针旋转，角度为负，渐变线逆时针旋转；
在确定好渐变线之后，在根据颜色的终止点进行颜色渐变。
0deg，渐变线处于垂直状态，开始点在下方，终止点在上方，所以颜色渐变是从下到上
90deg，渐变线顺时针旋转了90度，开始点在左边，终止点在右边，所以颜色渐变是从左到右
颜色的终止点（color-stop）
一个颜色从某个位置到这个终止点之间的区域填充该颜色，没有过渡渐变，但是从这个终止点位置开始，开始渐变过渡到下一个颜色，两个颜色之间的过渡终点默认是两个颜色终止点间的终点。如果最后一个颜色的终止点不是100%，那么默认最后的区域填充最后一个颜色；
比如：
linear-gradient(red 10%, green 50%, blue 90%);
上面css样式可以转化为以下
linear-gradient(red 0%, red 10%, green 50%, blue 90%, blue 100%);
然后再来分析
开始两个颜色终止点是red 0% ，red 10%，也就是说从开始的位置到0%位置填充红色，从0%位置到10%位置为红色到红色的渐变，也就是没有渐变，用红色填充；
第二段两个颜色终止点是red 10% ，green 50%，也就是说从10%位置到50%位置为红色到绿色的渐变；
第三段两个颜色终止点是green 50%， blue90%，也就是说从50% 位置到90%位置为绿色到蓝色的渐变；
最后是90%位置到100%位置，都是蓝色，即没有渐变，用蓝色进行填充；
下图用了辅助线画出每个颜色终止点的位置
渐变中点
默认情况下，从一个颜色的终止点平滑的过渡到另一个颜色的终止点，颜色之间的中点是两个颜色颜色转换的中点。你可以将中点移动到这两个颜色之间的任意位置，方法是在两个颜色之间添加未标记的 %，以指示颜色的中转位置。下面的示例是从起始点到10%的位置标记红色，从90%到结束标记蓝色。在10%到90%之间，颜色从红色过渡到蓝色，然而过渡的中点是在30%的标记上，而不是在没有30%中转点的情况下会默认为50%。
linear-gradient(red 10%, 30%, blue 90%);
linear-gradient(red 10%, blue 90%);
radial-gradient
定义： 函数创建了一个图片，其由一个从原点辐射开的在两个或者多个颜色之前的渐变组成
语法：background: radial-gradient(center, shape, size, start-color, ..., last-color);
看上去感觉很复杂的样子，我们来一个一个来看，其实也不是那么恐怖
center：渐变的开始中心，默认在图形的中心点
shape：渐变的形状，也就是定义渐变以什么形状向四周扩散，默认是椭圆形(ellipse)，可以设置为原形(circle)
size：渐变的大小，也就是渐变到哪里停止，有以下值：
closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角（默认值）
start-color.....last-color：和线性渐变的color-stop-list一样
下面来详细讲解各个参数的作用
center
默认是在图片的中心点，如下
width: 500px;
height: 500px;
background: radial-gradient(#58a, red);
改变中心点，语法：at x y，如 at 20% 20%
background: radial-gradient(at 20% 20%, #58a, red);
中心点可以使用百分比，也使用绝对值，也可以混合使用
使用百分比的话，x是以背景的宽度进行计算，y是以背景的高度计算
shape
共有两个值：ellipse，circle
ellipse
circle
但是有一点需要注意以下，当需要填充的背景正好是一个正方形，那么两个值所得到的效果是一样的
size
共有四个值： closest-side:半径为从圆心到最近边 closest-corner:半径为从圆心到最近角 farthest-side:半径为从圆心到最远边 farthest-side:半径为从圆心到最远角
为了更明显的看出效果，把渐变中心定在（30% 30%） 的位置
closest-side
background-image: radial-gradient(circle closest-side at 30% 30%, red, blue)
closest-corner
background-image: radial-gradient(circle closest-corner at 30% 30%, red, blue)
farthest-side
background-image: radial-gradient(circle farthest-side at 30% 30%, red, blue)
farthest-corner
background-image: radial-gradient(circle farthest-corner at 30% 30%, red, blue)
colors
这个就和线性渐变的color-stop-list一样了
