HTML5 Mobile Web 系列：利用 CSS3 做圖片漸層

可以減少圖片的使用，增加畫面顯示速度。

在設計頁面時，常會利用漸層（gradient）來作一些區塊的背景，雖然可以做一張 1 x n 的漸層圖片，像是這張圖：

再利用 CSS 寫成這樣：
.grad {
height: 50px;
background: url(/path/to/grad.png) repeat-x;
}
就可以產生下述的效果：

這樣除了多使用一張圖片（當然也可以換成 Data URI 來表示）以外，每次想要更換漸層顏色時，就必須另外做一張圖片，但是如果利用 CSS3 的漸層模組便可以直接產生漸層（還不會有圖片失真的問題）：
.grad {
height: 50px;
background-image: -webkit-gradient(linear, left top, left bottom, from(#3399ff), to(#66ffff));
}

就能夠產生一樣的效果：

值得注意的是，CSS3 漸層產生的是圖片而不是色彩喔！

這個語法是適用 WebKit 系列的瀏覽器，如果要支援 IE10、Firefox 4 以上的瀏覽器就必須寫成像是這樣（加上 W3C 目前制定的標準語法）：
.grad {
height: 50px;
/* IE10 */
background-image: -ms-linear-gradient(top, #3399FF 0%, #66FFFF 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #3399FF 0%, #66FFFF 100%);
/* Opera */
background-image: -o-linear-gradient(top, #3399FF 0%, #66FFFF 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, from(0, #3399FF), to(1, #66FFFF));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #3399FF 0%, #66FFFF 100%);
/* Proposed W3C Markup */
background-image: linear-gradient(top, #3399FF 0%, #66FFFF 100%);
}

當然，為了不支援的瀏覽器，你還是可以再最後面加上原本用圖片顯示漸層的語法，用以相容舊的瀏覽器

這是線性（linear）漸層的語法，其它的 CSS3 漸層產生方式可以參考W3C 的文件，再配合各個瀏覽器的 prefix 作調整囉。