CSS Gradient
以前我们用到图片的地方，需要自己制作或从网上下载；现在， CSS Gradients 赋予了CSS通过代码就能绘制图片的能力，这样做，能减少有关图片的http请求。
Gradient非常强大，可以绘制出复杂的几何图形或者精细的纹理背景
linear-gradient
linear-gradient() 线性渐变：
可以用在 background 或者 background-image 属性中。linear-gradient 接受一系列参数，根据这些参数来绘制背景或背景图像
默认情况
background-image: linear-gradient(red, blue);
上面的代码只传入了两个参数，表示两个颜色，默认情况下，linear-gradient 会以 red 为起点，blue为终点，在容器中从上到下垂直的绘制出 red-blue 渐变
指定渐变方向
通过一组表示方位的单词来指定linear-gardient中颜色的走向
background-image: linear-gradient(to right bottom, red, blue);
to 后面接代表方向的名词，例如：to right bottom 就表示从左上角开始，往右下角绘制
定制颜色值
linear-gradient 可以接受很多个颜色，这些颜色将按顺序，从前往后的被绘制出来，就像函数的链式调用。gradient 可以解析 RGB、HSL、HEX等格式的颜色值
- color-stop
颜色后面跟一个百分数，表示声明一个颜色锚点，指定了该颜色的起始位置
background: linear-gradient(to right, red, yellow 20%, green 60%, blue 100%);
- hard color-stop
有时候你不需要绘制渐变效果，比如你需要绘制的是一条彩虹，不同颜色之间分界明显（创建 hard color-stop）
background: linear-gradient(
to right,
red, red 14%,
orange 14%, orange 28%,
yellow 28%, yellow 42%,
green 42%, green 56%,
cyan 56%, cyan 70%,
blue 70%, blue 84%,
purple 84%, purple 100%);
上面的代码理解起来并不难：
百分比表示的仍然是位置，表示当前颜色的起始位置；比如 red, red 14% 这段的代码的意思是：颜色 red 在容器位置0%处开始，在14%处终止，于是在容器中0%~14%的位置就只有 red 颜色
例子
-
国旗
法国国旗
background: linear-gradient(to right, #001E96, #001E96 33%, #FFFFFF 33%, #FFFFFF 66%, #EE2436 66%, #EE2436);德国国旗
background: linear-gradient(#000000, #000000 33%, #DD0000 33%, #DD0000 66%, #FFCE00 66%, #FFCE00); -
极光
background: linear-gradient(to top right, #5ee7df 0%, #b490ca 100%);
