CSS3漸變（Gradients）

一、簡述

CSS3 漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。

CSS3 定義了兩種類型的漸變（gradients）：

• 線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
• 徑向漸變（Radial Gradients）- 由它們的中心定義

優點是：1.不必通過圖像來實現漸變效果，可以節省寬帶和下載的時間  

               2.因爲漸變是由瀏覽器生成的，所以放大時使用漸變看起來效果更好

缺點：Internet Explorer 9 及之前的版本不支持漸變。

二、語法

（一）線性漸變

background: linear-gradient(direction, color-stop1, color-stop2, ...);    使用方向

repeating-linear-gradient() 函數用於重複線性漸變： 

background: linear-gradient(angle, color-stop1, color-stop2);  使用角度

direction:方向，舉例：（1）從上到下可以默認不填 或者to bottom （2）從左到右： to right （3）對角：to bottom right

angle：角度，角度是指水平線和漸變線之間的角度，逆時針方向計算。換句話說，0deg 將創建一個從下到上的漸變，90deg 將創建一個從左到右的漸變。

color-stop：至少有兩個顏色參數，纔有漸變效果，可以使用多個顏色參數

.color {
    height: 55px;
    background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* 標準的語法（必須放在最後） */
}

 

效果：

還可以使用 rgba() 函數來定義顏色結點

rgba() 函數中的最後一個參數可以是從 0 到 1 的值，它定義了顏色的透明度：0 表示完全透明，1 表示完全不透明。

.color {
  /* Safari 5.1 - 6.0 */
  background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  /* Opera 11.1 - 12.0 */
  background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  /* Firefox 3.6 - 15 */
  background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  /* 標準的語法 */
  background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
}

效果截圖： 

（二）徑向漸變

徑向漸變由它的中心定義。

background: radial-gradient(center, shape, size, start-color, ..., last-color);

repeating-radial-gradient() 函數用於重複徑向漸變 

shape：定義形狀，它可以是值 circle 或 ellipse。其中，circle 表示圓形，ellipse 表示橢圓形。默認值是 ellipse。

size 參數定義了漸變的大小。它可以是以下四個值：

• closest-side
• farthest-side
• closest-corner
• farthest-corner

.color {
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
    background: radial-gradient(red, green, blue); /* 標準的語法（必須放在最後） */ 顏色分佈均勻
    background: radial-gradient(red 5%, green 15%, blue 60%); /* 標準的語法（必須放在最後）顏色分佈不均勻 */
}