前言
现在设计师同学越来越高大上了，纯色背景已经不能满足人民群众日益增长的物质文化需要了，必须整渐变背景 o(╯□╰)o。怎么还原呢，设计师直接丢过来一个几十 K 的图片，这怎么行。。。
还好我们有 CSS 第三代！这次就来唠唠 CSS3 Gradient(/ˈgreɪdɪənt/) 的用法。
兼容性
从 Can I use 上看，现代浏览器支持程度良好，尤其移动端，对于不支持的浏览器，下文会提供一种采用纯色的降级方案。
但是各种兼容性问题肯定免不了，Gradient 和 Flex box 一样 eggache，总共有三种语法规则，而且差异很大。。。
这里为了讨论简单，我们只涉及最新的语法（基本能覆盖大量新浏览器了）。老旧语法规则和 IE 等各浏览器的兼容方法请见参考文章的 2、3 有详细的介绍，也可以使用 Gradient Generator 或者 autoprefixer 自动生成代码。
前置知识
1、绘制区域，也就是规范中所谓的 gradient box（为了理解无歧义，下文不再翻译该术语），跟所关联 DOM 的实际尺寸有关，比如，设定 background 的话，绘制区域就是 DOM 的 padding box，除非用 backgroud-size 指定大小；如果是设定 list-style-image，绘制区域就是 1em 的正方形。
2、从 W3C 的描述中可以知道，浏览器实际是根据 Gradient 指定的语法来生成对应的图片
A gradient is an image that smoothly fades from one color to another.
而且不只 background 可以用，比如
|
1 2 |
background: linear-gradient(white, gray); list-style-image: radial-gradient(circle, #006, #00a 90%, #0000af 100%, white 100%); |
3、由于是 image，所以用于 background 时，实际是设置在 background-image 上，如果只是单纯的渐变颜色，可以用以下的样式来对不支持的老旧浏览器做降级处理
|
1 2 3 4 5 6 |
.gradient { /* can be treated like a fallback */ background-color: red; /* will be "on top", if browser supports it */ background-image: linear-gradient(red, orange); } |
原理就借用慕课网的一张图：
Gradient 有几个子特性，下面一一列出。
线性渐变（linear-gradient）
语法如下：
|
1 2 3 4 5 |
linear-gradient() = linear-gradient( [ | to ]?, <color-stop-list> ) <side-or-corner> = [left | right] || [top | bottom] |
第一个参数指明了颜色渐变的方向：
- 可以是角度，比如 0deg，表示正上方向，90deg 表示向右（顺时针）
- 也可以是关键词，比如 to top, to right, to bottom, to left, 分别对应了 0deg, 90deg, 180deg, 270deg。当然也可以不指定，默认值是 to bottom
第二个参数指明了颜色断点（即 color-stop）。位置可以省略，第一个默认为 0%，最后一个默认为 100%，如果中间的值没有指定，则按颜色数目求均值，比如
|
1 2 3 |
linear |