CSS3 網頁漸層背景顏色效果設計
網頁漸層背景顏色效果是現在網頁設計師經常使用的一種技巧，傳統的網頁設計必須使用漸層圖片來當作網頁背景圖片，才能呈現出網頁漸層背景顏色的效果，不過 CSS3 有推出一個新的 Gradients 漸層效果功能，透過這一個 Gradients 設定就能輕鬆的讓瀏覽器自動替網頁呈現出漸層背景效果，不需要準備漸層圖片就能做到這樣的視覺效果，而且還可以設定漸層所要呈現的顏色與方向，顏色可以設定多個不同的顏色去變化，方向也可以設定上下左右延伸以及透過角度呈現，甚至可以設計成徑向漸層效果，功能非常強大。 CSS3 的 Gradients 漸層效果功能語法
線性漸層語法： background:
linear-gradient( 方向 , 顏色 1, 顏色 2, ......); 徑向漸層語法： background: radial-gradient(ellipse 或 circle, 顏色 1, 顏色 2, ......);
CSS3 的 Gradients 漸層效果功能是直接套用在 background 屬性中的一個功能，我們這篇介紹的兩種漸層方式差別在於 gradient 的前綴，線性漸層的前綴是 linear ，徑向漸層的前綴則是 radial ，除此之外，為了可以獲得最佳的瀏覽器支援效果，我們會在 gradient 的最前面再加上瀏覽器的前綴，讓瀏覽器知道我們要顯示 gradient 的功能，這些前綴整理如下。 瀏覽器適用前綴
Google
Chrome 與 Apple Safari 使用 -webkit- Mozilla
FireFox 使用 -moz- Opera
使用 -o-
我們將以上的語法關念套用到範例看看設計出來的效果吧！ CSS3 網頁漸層背景顏色效果設計範例一、線性漸層
<style type="text/css"> 網站內容 ...
範例呈現的效果
範例中的 HTML 網頁部份共有兩個結構，其中一個就是網頁本身的 body 標籤 ，中間包著一個名為 container 的 DIV 區塊 ，這樣設計的用意在於利用 container 區塊的寬度與高度來填滿整個網頁比較有彈性，如果單純的在 body 標籤 設定 CSS3 的 Gradients 漸層效果，會造成當網頁內容長度太長，超出預設的 body 標籤 高度，超出的部份就不會有漸層背景顏色，所以我們在 body 標籤 並未固定一個高度，而是在 container 區塊內設高度，隨著網頁內容的多寡再自己調整要顯示的漸層背景顏色範圍即可。 各位可以在範例中看到這個網頁的漸層背景顏色是由上往下發展，從第一個顏色黃色（ yellow ）開始漸漸變成紅色（ yellow ），你也可以設定更多不同的顏色、調整漸層的發展方向，更多變化請參閱《 CSS3
Gradients 漸層效果 》篇的詳細介紹。 CSS3 網頁漸層背景顏色效果設計範例二、徑向漸層
<style type="text/css"> 網站內容 ...
範例呈現的效果
範例二所呈現的就是 CSS3 Gradients 漸層效果 功能中的徑向漸層，我們設計的顏色是白色（ white ）漸層至橘色（ orange ），預設的效果是從中心開始向外漸層，所以會看到像範例的這種效果，顏色一樣可以自己選擇，值得一提的是 CSS3 Gradients 預設的徑向漸層效果是橢圓形的，參數為 ellipse ，允許網頁設計師調整為正圓形，只要使用參數 circle 即可，就像範例這樣。 以上兩個範例呈現了 CSS3 網頁漸層背景顏色效果設計的技巧，其實 Gradients 的功能很強大，可以做許多項的細微調整，關於更詳細的用法請各位詳細閱讀《 CSS3 Gradients 漸層效果 》篇的內容，對於設計出其它變化效果會有幫助。
VIDEO
