漸變背景
CSS3漸變讓你顯示兩個或多個指定的顏色之間的平滑過渡。
此前，您必須使用圖像，這些影響。 但是，通過使用CSS3漸變可以減少下載時間和帶寬使用。 此外，放大時與漸變元件更好看，因為是由瀏覽器所生成的梯度。
CSS3定義了兩種類型的漸變：
- 線性漸變（下降/上/左/右/對角線）
- 徑向梯度（通過它們的中心定義）
瀏覽器支持
在表中的數字規定，完全支持該屬性的第一個瀏覽器版本。
其次通過數字-webkit-, -moz- ，或-o-指定用一個前綴工作的第一個版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| linear-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| radial-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
| repeating-linear-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| repeating-radial-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
CSS3線性漸變
要創建必須限定至少兩個色標線性漸變。 色標要渲染之間平滑過渡的顏色。 還可以設置一個起點和與梯度影響沿一個方向（或角度）。
句法
background: linear-gradient( direction , color-stop1 ,
color-stop2, ... );線性漸變-從上到下（默認）。
下面的例子表明，從頂端開始，線性漸變。 它開始紅，過渡到黃色：
例
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(red,
yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,
yellow); /* For
Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For
Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard
syntax */
} 試一試» 線性漸變-左到右
下面的例子表明，從左側開始的線性梯度。 它開始紅，過渡到黃色：
例
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left,
red , yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red,
yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,
red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(to
right, red , yellow); /* Standard syntax */
} 試一試» 線性漸變-對角線
可以對角地通過指定水平和垂直起始位置作出一個梯度。
下面的例子顯示了開始於左上角（並轉到右下）線性漸變。 它開始紅，過渡到黃色：
例
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left
top, red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom
right, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom
right, red, yellow); /* For Firefox 3.6 to 15 */
background:
linear-gradient(to bottom right, red, yellow); /* Standard syntax */
} 試一試» 使用角度
如果你想在梯度的方向更多的控制，你可以定義一個角度，而不是預定的方向（上下，到頂部，向右，向左，到右下角，等等）。
句法
background: linear-gradient( angle , color-stop1 ,
color-stop2 );
的角度被指定為水平線和梯度線之間的角度。
下面的例子說明如何在線性漸變使用角度：
例
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(-90deg,
red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(-90deg,
red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(-90deg,
red, yellow); /* For Firefox 3.6 to 15 */
background:
linear-gradient(-90deg,
red, yellow); /* Standard syntax */
} 試一試» 使用多個顏色停止
下面的例子顯示了一個線性漸變（從上到下）與多個色標：
例
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(red,
yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,
yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red,
yellow, green); /* For Firefox 3.6 to 15 */
background:
linear-gradient(red, yellow, green); /* Standard syntax */
} 試一試» 下面的例子演示如何創建一個線性漸變的彩虹和一些文字的顏色（從左至右）：
漸變背景
例
#grad {
background: red; /* For browsers that do not
support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Opera 11.1 to 12.0 */
background:
-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/*
For Fx 3.6 to 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Standard syntax */
background: linear-gradient(to right,
red,orange,yellow,green,blue,indigo,violet);
} 試一試» 使用透明度
CSS3梯度也支持透明度，其可用於創建衰落效應。
要增加透明度，我們使用rgba()函數來定義顏色停止。 在最後一個參數rgba()函數可以是從0到1的值，並且它定義了顏色的透明度：0表示完全透明，1表示全色（無透明度）。
下面的例子表明，從左側開始的線性梯度。 它開始完全透明，完全轉換成紅色：
例
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari
5.1-6*/
background:
-o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
/*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1)); /*Standard*/
} 試一試» 重複的線性梯度
的repeating-linear-gradient()函數是用來重複線性梯度：
例
一個重複的線性漸變：
#grad {
background: red; /* For browsers that do not
support gradients */
/* Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(red,
yellow 10%, green 20%);
/* Opera 11.1 to 12.0 */
background:
-o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6
to 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%,
green 20%);
/* Standard syntax */
background:
repeating-linear-gradient(red, yellow 10%, green 20%);
} 試一試» CSS3徑向漸變
徑向漸變是由它的中心來定義。
要創建一個徑向漸變，你也必須限定至少兩個色標。
句法
background: radial-gradient( shape size at position, start-color, ..., last-color );默認情況下，形狀是橢圓形，大小為最遠角落，位置是中鋒。
徑向漸變-間隔均勻的色標（默認）。
下面的例子顯示了均勻分佈的色標徑向漸變：
例
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(red, yellow, green); /*
Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, yellow, green); /* For Opera
11.6 to 12.0 */
background: -moz-radial-gradient(red, yellow, green); /*
For Firefox 3.6 to 15 */
background: radial-gradient(red, yellow, green);
/* Standard syntax */
} 試一試» 徑向漸變-以不同的間隔顏色停止
下面的例子顯示了不同的間隔色標徑向漸變：
例
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(red 5%,
yellow 15%, green 60%); /*
Safari 5.1-6.0 */
background: -o-radial-gradient(red 5%, yellow
15%, green 60%); /* For Opera
11.6-12.0 */
background: -moz-radial-gradient(red 5%, yellow 15%,
green 60%); /*
For Firefox 3.6-15 */
background: radial-gradient(red 5%, yellow
15%, green 60%);
/* Standard syntax */
} 試一試» 設定的形狀
形狀參數定義的形狀。 它可以採取的價值圓形或橢圓形。 默認值是橢圓。
下面的例子顯示了一個圓形狀的徑向漸變：
例
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(circle, red, yellow, green); /*
Safari */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera
11.6 to 12.0 */
background: -moz-radial-gradient(circle, red, yellow,
green); /* Firefox 3.6 to 15 */
background: radial-gradient(circle, red,
yellow, green);
/* Standard syntax */
} 試一試» 不同尺寸關鍵字的使用
尺寸參數定義梯度的大小。 它可以採取四個值：
- 最接近端
- 最遠的端
- 最近的角
- 最遠的角落
例
徑向漸變不同尺寸的關鍵字：
#grad1 {
background: red; /* For browsers that do not
support gradients */
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60%
55%, closest-side, red, yellow, black);
/* For Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%, closest-side, red, yellow, black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%,
closest-side, red, yellow, black);
/* Standard syntax */
background: radial-gradient(closest-side at 60% 55%, red, yellow,
black);
}
#grad2 {
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side,
red, yellow, black);
/* Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%,
farthest-side, red, yellow, black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black);
/* Standard syntax */
background: radial-gradient(farthest-side at 60%
55%, red, yellow, black);
} 試一試» 重複徑向梯度
的repeating-radial-gradient()函數是用來重複徑向梯度：
例
一個重複徑向漸變：
#grad {
background: red; /* For browsers that do not
support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-repeating-radial-gradient(red,
yellow 10%, green 15%);
/* For Opera 11.6 to 12.0 */
background:
-o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* For Firefox
3.6 to 15 */
background: -moz-repeating-radial-gradient(red, yellow 10%,
green 15%);
/* Standard syntax */
background:
repeating-radial-gradient(red, yellow 10%, green 15%);
} 試一試» 自測練習用！
練習1» 練習2» 練習3» 練習4» 練習5» 練習6» 練習7»