CSS3 的线性渐变背景

在 CSS3 中有可以使用 linear-gradient 记号得到线性渐变的背景。例如

background: linear-gradient(top, #FFFFFF 0%, #E6F3FF 100%);

这是最简单的两种颜色之间线性渐变的情形。第1个参数的 top 表示自上而下的渐变，而后面的两个参数表示在刚上边的颜色是 #FFFFFF 而最下边的颜色是 #E6F3FF。

上面所说的是 W3C 标准中的写法。由于现在这个 linear-gradient 记号还不是正式标准，在各个浏览器中都需要加上前缀才能使用它的。例如：

/* firefox */
background: -moz-linear-gradient(top, #FFFFFF 0%, #E6F3FF 100%);
/* webkit */
background: -webkit-linear-gradient(top, #FFFFFF 0%, #E6F3FF 100%);
/* ie */
background: -ms-linear-gradient(top, #FFFFFF 0%, #E6F3FF 100%);
/* opera */
background: -o-linear-gradient(top, #FFFFFF 0%, #E6F3FF 100%); 

CSS 的 linear-gradient 方法在 Firefox 3.6，Chrome 10，Safari 5.1，Opera 11.10 以及 IE 10 开始得到支持。

参考资料：
[1] CSS Image Values and Replaced Content Module Level 3
[2] linear-gradient - MDN
[3] Ultimate CSS Gradient Generator
[4] Cross-Browser CSS Gradient
[5] Surfin' Safari - CSS3 Gradients
[6] When can I use CSS Gradients?
[7] CSS3 Gradients in IE10 Platform Preview 1