以前，我们要实现这种渐变，可能要用 Photoshop 或 Fireworks 创建一个渐变图形，然后使用 background-image 属性把渐变图形放在元素的背景中。
现在，CSS支持渐变背景，可以理解为Web浏览器即时创建的图像。所以，渐变也使用常规的 background-image 属性创建
这条直线的方向由角度指定，或者在关键字 to 后面加上 top、bottom、right、left 中的某一个关键字或多个关键字，例如 to bottom left。
另外，还可以用 to bottom right 这样的关键字指定渐变的角度。使渐变从元素的左上角开始，到元素的右下角结束。
角度的值按顺时针方向旋转，因此，90deg 表示元素的右边（与 to right 相同），180deg 表示元素的底边（与 to bottom 相同），270deg 表示元素的左边（与 to left 相同）。
使用角度值时，浏览器会绘制一条经过元素中心点的假象线。指定的角度就是这条线的角度，同时还指明过度在哪里结束。
浏览器会绘制一条经过元素中心点的假想线刻度，因此，这个过渡从元素的左下角开始，到右上角结束。
添加色标后，背景会从第一个颜色过渡到第二个颜色，再从第二个颜色过渡到第三个颜色，直到渐变的最后一个颜色为止。
背景色从左到右开始渐变，最左边是玫红，在元素宽度20%的位置变成青色，80%的位置变成黄色，最后是蓝色。
色标的位置不一定要用百分比，也可以用像素或者em值。不过百分比是最灵活的，会随着元素的宽度或高度而变化。
使用多色渐变时，第一个颜色和最后一个颜色无需指定位置，因为浏览器会嘉定第一个颜色从0%的位置开始，最后一个颜色在100%的位置结束。
第一个颜色值（#E94E65）也有位置值（20%）。因此，元素横向前20%宽度的背景色是纯粉红色。从20%的位置开始才由粉红色变成青色。直到40%的位置完全结束粉红色。
在【CSS】同时使用多个背景图这个笔记的最后有记到，使用多个背景图时，最先用到的背景图会在最上层。
IE9会应用指定的背景色，因为不支持线性渐变，会跳过第二个声明。其他浏览器会应用背景色，还会创建渐变，渐变会覆盖背景色。
如果使用的是RGBA颜色（RGBA颜色可见【CSS】着色与透明笔记），设置了一定程度的透明度，且不想透过渐变看到背景色。此时可以使用简写的 background 属性，覆盖 background-color 属性（这是简写的background属性的一个比较怪异的行为，可见【CSS】背景基础知识简写部分）。所以可以这样写。
平铺的线性渐变定位色标用的是像素值或者em值，这里百分比不是很好用，至少我理解起来比较费劲。
上面例1中，定义了渐变的角度，浏览器从左下角开始绘制渐变，前20像素是绿色，此后直至30像素的位置过渡到紫色，然后直至40像素的位置再过渡到绿色。绘制完这个渐变后，浏览器会像平铺图像那样把这个渐变铺满整个背景。
注意例2中对色标的定位。这样设置色标的位置，可以控制不同颜色在过渡中的强度。使得各个颜色过渡之间的边界变得清晰，形成条纹效果。
可以用关键字 at 后面加上 background-position 属性支持的定位关键字和数值，指定渐变中心的位置。
