CSS3 Gradients 漸層效果

CSS3 Gradients 是用來設計漸層效果的新功能，在傳統的網頁設計中，如果要設計出一個漸層的背景顏色或一個具有漸層色彩的區塊，需要透過圖片的設計來處理，但是到了 CSS3 的發展，這樣的傳統設計思維有所改變，CSS3 推出了一個名為 Gradients 的功能，可以設計出不同的漸層效果，僅需透過 Gradients 的調整，例如漸層方向、漸層所呈現的顏色、漸層的呈現形狀，就可以很輕易的讓瀏覽器自己產生出漸層效果，可以應用在網頁本身的背景漸層效果或是區外的漸層視覺效果，優點是不用先設計漸層圖片、減少頻寬的浪費，而且漸層放大後的效果也比傳統的圖片式漸層效果好，因為是用瀏覽器自動產生的漸層，優點自然不在話下。

CSS3 Gradients 目前有兩種漸層效果，分別是線性漸層（Linear Gradients）以及徑向漸層（Radial Gradients），這兩者的設定方式不太一樣，實際的視覺效果當然也不一樣，本篇會依序提供它們的實際範例給各位讀者朋友參考。

瀏覽器對 CSS3 Gradients 的支援程度
  • IE 10.0 及以上的版本支援。
  • Google Chrome 26.0 及以上的版本支援。
  • FireFox 16.0 及以上的版本支援。
  • Apple Safari 6.1 及以上的版本支援。
  • Opera 12.1 及以上的版本支援。
以上整理的是各家主流瀏覽器對 CSS3 Gradients 的支援程度，幾乎最新版本的瀏覽器都已經支援，不過在設計 Gradients 的時候，還是建議多找幾個瀏覽器實際測試效果，為了讓效果表現成功率更高，建議使用各種瀏覽器適用前綴，整理如下。

瀏覽器適用前綴
  • Google Chrome 與 Apple Safari 使用 -webkit-
  • Mozilla FireFox 使用 -moz-
  • Opera 使用 -o-
線性漸層（Linear Gradient）與徑向漸層（Radial Gradients）的語法規則
線性漸層語法：background: linear-gradient(方向,顏色1,顏色2, ......);
徑向漸層語法：background: radial-gradient(ellipse 或 circle,顏色1,顏色2, ......);
線性漸層的方向可以是由上而下漸層、由下而上漸層、由左而右或由右而左漸層，甚至可以設定漸層角度，徑向漸層的部份則可以使用預設的橢圓形（ellipse）或自定為圓形（circle）漸層效果，這些都會在以下的範例中呈現給各位看。

CSS3 Gradients 的線性漸層 Linear Gradients 效果範例

Gradients 可以設定線性漸層的方向，預設值為由上而下，也允許網頁設計師設定為由左而右、由右而左甚至是對角線的線性表現，分別表現如下範例語法。

由上而下的線性漸層效果（預設值）
<style type="text/css">
#T2B{
width:200px;
height:150px;
background: -webkit-linear-gradient(yellow,red);
background: -o-linear-gradient(yellow,red);
background: -moz-linear-gradient(yellow,red);
background: linear-gradient(yellow,red);
}
</style>
<div id="T2B"></div>
範例的實際效果
此範例設定的是由黃色開始漸層至紅色的效果，預設由上而下漸層。

由左而右的線性漸層效果
<style type="text/css">
#L2R{
width:200px;
height:150px;
background: -webkit-linear-gradient(left,yellow,red);
background: -o-linear-gradient(right,yellow,red);
background: -moz-linear-gradient(right,yellow,red);
background: linear-gradient(to right,yellow,red);
}
</style>
<div id="L2R"></div>
範例的實際效果
雖然預設的 CSS3 Gradients 的線性漸層的預設效果是由上而下，但是也允許設計師採用橫向的漸層，例如此範例的由左而右漸層，值得注意的是適用於 Google Chrome 與 Apple Safari 使用的前綴 -webkit- 第一個方向參數要用＂從哪個方向開始＂的概念，像語法中寫 left 就代表第一個顏色 yellow 是從左方開始向右漸層為 red，其它的瀏覽器則是用＂向哪個方向漸層＂的概念，所以第一個方向參數寫成 right 代表＂向右漸層＂的意思。

對角線的線性漸層效果（由左下向右上）
<style type="text/css">
#B2R{
width:200px;
height:150px;
background: -webkit-linear-gradient(left top,yellow,red);
background: -o-linear-gradient(bottom right,yellow,red);
background: -moz-linear-gradient(bottom right,yellow,red);
background: linear-gradient(to bottom right,yellow,red);
}
</style>
<div id="B2R"></div>
範例的實際效果
如果由上而下漸層或由左而右水平方向的漸層無法滿足實際需求，也可以像此範例採用對角線的漸層方式，同樣的，適用於 Google Chrome 與 Apple Safari 使用的前綴 -webkit- 第一個方向參數要用＂從哪個方向開始漸層＂，而其他的瀏覽器則使用＂向哪個方向漸層＂的概念。

利用角度調整的線性漸層效果
<style type="text/css">
#UA{
width:200px;
height:150px;
background: -webkit-linear-gradient(90deg,yellow,red);
background: -o-linear-gradient(90deg,yellow,red);
background: -moz-linear-gradient(90deg,yellow,red);
background: linear-gradient(90deg,yellow,red);
}
</style>
<div id="UA"></div>
範例的實際效果
我們在這個範例中採用角度來決定漸層的方向，CSS3 Gradients 的預設漸層方向是由上而下，不過在此我們利用 gradients 的第一個參數並設定為 90deg，也就是轉 90 度的意思，讓原本由上而下漸層的效果變成由左而右漸層，轉的角度允許設計師自己決定。

CSS3 Gradients 的徑向漸層 Radial Gradients 效果範例
<style type="text/css">
#ellipse{
width:200px;
height:100px;
background: -webkit-radial-gradient(ellipse,white,orange);
background: -o-radial-gradient(ellipse,white,orange);
background: -moz-radial-gradient(ellipse,white,orange);
background: radial-gradient(ellipse,white,orange);
}
#circle{
width:200px;
height:100px;
background: -webkit-radial-gradient(circle,white,orange);
background: -o-radial-gradient(circle,white,orange);
background: -moz-radial-gradient(circle,white,orange);
background: radial-gradient(circle,white,orange);
}
</style>
<div id="ellipse">ellipse</div>
<div id="circle">circle</div>
範例的實際效果
ellipse
circle
CSS3 Gradients 不僅可以設計出線性漸層效果，還可以設計出徑向漸層 Radial Gradients 效果，所謂的徑向漸層就是像範例這樣圓形的漸層，Gradients 預設的 Radial 漸層是橢圓形（ellipse）的，允許網頁設計師修改為圓形（circle）漸層效果，從範例的呈現效果可以很明顯得看出橢圓形（ellipse）與圓形（circle）漸層的效果差異。

更多 CSS3 設計
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012