CSS3 漸變（gradients）可以讓你在兩個(gè)或多個(gè)指定的顏色之間顯示平穩(wěn)的過(guò)渡。

以前，你必須使用圖像來(lái)實(shí)現(xiàn)這些效果。但是，通過(guò)使用 CSS3 漸變（gradients），你可以減少下載的事件和寬帶的使用。此外，漸變效果的元素在放大時(shí)看起來(lái)效果更好，因?yàn)闈u變（gradient）是由瀏覽器生成的。

因?yàn)闉g覽器的不同，所以你在代碼前面需要加上瀏覽器的前綴： -webkit-、-moz- 或 -o- 

Css3線(xiàn)性漸變：

    background: linear-gradient(direction, color-stop1, color-stop2, ...);    
    #jianbian{ background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradien    t(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */ backgr    ound: linear-gradient(red, blue); /* 標(biāo)準(zhǔn)的語(yǔ)法 ，必加*/}

從左到右漸變的話(huà)就需要再加一個(gè)屬性：

    #jianbian{ background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */ background: -    o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, red    , blue); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, red , blue); /* 標(biāo)準(zhǔn)的語(yǔ)法 ，    必加*/ }

還有特別多的屬性，小伙伴們可以自己去嘗試一下！