Veela Viva

通常漸層的部分都是設計師直接切圖設background

因為用CSS寫起來好長阿~~

由上到下

filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#777777', endColorStr='#FFFFFF', gradientType='0')

由左到右

-ms-filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#550000FF', endColorStr='#55FFFFFF', gradientType='1') /*for ie8*/

filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#550000FF', endColorStr='#55FFFFFF', gradientType='1') /*for ie6、7*/

*zoom:1

由內到外

-ms-filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#777777', endColorStr='#FFFFFF', gradientType='2')/*for ie8*/

filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#777777', endColorStr='#FFFFFF', gradientType='2')/*for ie6、7*/

*zoom:1

現在CSS3有更方便的寫法了喔

linear gradient( 顏色漸變方向, 色碼1 位置1,色碼 2 位置2,....)

直線漸層

顏色漸變方向:top(由上至下)，left(由左至右)，top left (由左上到右下)....以此類推....

還可以使用角度:45degree (左下到右上)，-45degree (左上到右下).....

還有很複雜的圓形漸層，可以參考下篇文章

http://www.tellustek.com/web-design/130-web-design-048.html

如果這些都還嫌麻煩的話...那就直接用工具吧，選一選就可以直接拿來套了

非常好用的漸層CSS工具 Ultimate CSS Gradient Generator

http://www.css3factory.com/linear-gradients/

下面還有很膩害的圖像漸層背景~~可以參考一下

http://audi.tw/Blog/CSS/css.gradient.asp

-----------------------------2012/8/23更新-----------------------------------

最近發現一個可以把photoshop的漸層圖層直接轉成CSS3的plugin

PS3、4、5、6都可使用，但一定要使用photoshop內建漸層功能

真的很厲害!!

http://css3ps.com/