以前我们用到图片的地方，需要自己制作或从网上下载；现在， CSS Gradients 赋予了CSS通过代码就能绘制图片的能力，这样做，能减少有关图片的http请求。

Gradient非常强大，可以绘制出复杂的几何图形或者精细的纹理背景

linear-gradient() 线性渐变：

可以用在 background 或者 background-image 属性中。linear-gradient 接受一系列参数，根据这些参数来绘制背景或背景图像

上面的代码只传入了两个参数，表示两个颜色，默认情况下，linear-gradient 会以 red 为起点，blue为终点，在容器中从上到下垂直的绘制出 red-blue 渐变

通过一组表示方位的单词来指定linear-gardient中颜色的走向

to 后面接代表方向的名词，例如：to right bottom 就表示从左上角开始，往右下角绘制

linear-gradient 可以接受很多个颜色，这些颜色将按顺序，从前往后的被绘制出来，就像函数的链式调用。gradient 可以解析 RGB、HSL、HEX等格式的颜色值

颜色后面跟一个百分数，表示声明一个颜色锚点，指定了该颜色的起始位置

有时候你不需要绘制渐变效果，比如你需要绘制的是一条彩虹，不同颜色之间分界明显（创建 hard color-stop）

上面的代码理解起来并不难：

百分比表示的仍然是位置，表示当前颜色的起始位置；比如 red, red 14% 这段的代码的意思是：颜色 red 在容器位置0%处开始，在14%处终止，于是在容器中0%~14%的位置就只有 red 颜色

国旗

法国国旗

德国国旗

极光

参考链接：css-tricks.com/snippets/cs…