CSS實現漸層 相容各主流瀏覽器

某些情況下，漸層是不需要切圖的，也許還有新手不知道。這篇文章來講一下用CSS實現線性漸層，並且相容IE6等等。

什麼情況下需要CSS實現漸層？

用CSS代替背景圖片就不用說了。比如這個表單下的背景，它是#ffffff 到#eeeeee 的線性漸層。

某些時候使用者可能會把它操作成這樣：

或者說這是一個可變高的布局。這時候用CSS實現這種線性漸層是最理想的。

具體代碼如下：

1 .gradual_ff_f2 {2     filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ffffff,endcolorstr=#eeeeee,gradientType=0);3     background:-moz-linear-gradient(top, #ffffff, #eeeeee);4     background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#eeeeee));5     background:-o-linear-gradient(top, #ffffff, #eeeeee);6         /*不可縮寫，如#ffffff不能縮寫成#fff,原因有待考究*/7 }

此方法只適用於單純的線性漸層，並不支援PS裡面的各種漸層（如圓形漸層），當然前提是相容各大瀏覽器，尤其是IE系列。大家可在適用的情況下使用。