CSS渐变色效果的实现方法

因为CSS渐变色(Gradients)技术是CSS3里比较新的技术，属于高级的CSS功能，于是每种浏览器对这种技术的实现都添加了一些自己的特色。例如以WebKIt为渲染引擎的谷歌浏览器，就对它实现了多种语法。下面的这段代码基本包括了所有自顶向下颜色渐变的所有情况：

#example1 {

/* 底色 */

background-color: #063053;

/* chrome 2+, safari 4+; multiple color stops */

background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99));

/* chrome 10+, safari 5.1+ */

background-image: -webkit-linear-gradient(#063053, #395873, #5c7c99);

/* firefox; multiple color stops */

background-image: -moz-linear-gradient(top,#063053, #395873, #5c7c99);

/* ie 6+ */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#063053’, endColorstr=‘#395873’);

/* ie8 + */

-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#063053’, endColorstr=‘#395873’)”;