渐变
前言
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡，linear-gradient/radial-gradient 函数用于创建一个表示两种或多种颜色线性渐变的 图片。
以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。
CSS3 定义了两种类型的渐变（gradients）：
- 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
- 径向渐变（Radial Gradients）- 由它们的中心定义
一定要注意，linear-gradient/radial-gradient 返回的是一个 图片，因此我们可以把它赋值给：
background-imageborder-imagelist-style-image
线性渐变 linear-gradient
linear-gradient(<angle>?, <color1> <percentage>?, <color2> <percentage>?, ...)
<angle>可选项，默认为180deg，表示后续的颜色从上到下进行渐变<color>必选项，指定过渡色<percentage>可选项，指定纯色点在图片中的位置
对于 <angle> 的理解可以参考下图：
圆内部的箭头方向就是颜色渐变方向，默认状态就是 180deg，即从上往下渐变，此时我们往顺时针转动，渐变方向也会顺时针转动，经过圆顶部相当于过了一周期，则回到 0deg，此时相当于从下往上渐变。
对于 percentage 的理解可以参考下面：
div {
border: 1px solid black;
width: 300px;
height: 300px;
background-image: linear-gradient(red, green, skyblue);
/* 等价于 */
background-image: linear-gradient(180deg, red 0%, green 50%, skyblue 100%);
}
当我们没有指定渐变色后面的 <percentage> 时，每个渐变色纯色点之间的距离会根据 渐变方向 等分整个盒子，默认情况下，第一个渐变色的纯色点为 0%，最后一个渐变色纯色点为 100%。
如果我们指定第一个渐变色的纯色点大于 0%，那么从 0% 到指定的位置都是第一个渐变色的纯色范围：
div {
background-image: linear-gradient(red 50%, green, skyblue);
}
从 0% ~ 50% 的区域都是纯红色：
同理，如果我们修改了最后一个渐变色的纯色点小于 100%，那么从指定位置到 100% 都是纯色范围：
div {
background-image: linear-gradient(red 50%, green, skyblue 50%);
}
从 50% 到 100% 都是纯蓝色：
另外，这里再补充一下过渡点，过渡点意味着从上一个颜色过渡到下一个颜色的瞬间，过渡点的位置一般就是两个纯色点的中间位置，比如：
div {
background-image: linear-gradient(red, green, skyblue);
}
25% 就是红色和绿色之间的过渡点，该点是红色完全过渡到绿色的瞬间，可以看看之前贴的第一张图。