01之04
使用CSS3創建跨瀏覽器線性漸變
線性漸變
您將看到的最常見的漸變類型是兩種顏色的線性漸變。 這意味著漸變將沿直線從第一個顏色逐漸變為第二個直線。 此頁面上的圖像顯示簡單的從＃999（深灰色）到#fff（白色）的從左到右的漸變。
線性漸變是最容易定義的，並且在瀏覽器中支持最多。 Android 2.3+，Chrome 1+，Firefox 3.6+，Opera 11.1+和Safari 4+均支持CSS3線性漸變。 Internet Explorer可以使用篩選器添加漸變並將它們支持回IE 5.5。 這不是CSS3，但它是跨瀏覽器兼容性的選項。
當你定義一個漸變時，你需要定義幾個不同的東西：
- 它是什麼類型的梯度 - 線性或徑向
- 應該開始漸變的地方
- 應該停止漸變的地方
- 漸變中有什麼顏色，以及它們應該在哪裡開始和停止
要使用CSS3定義線性漸變，請編寫：
線性漸變（ 角度或側面或角落 ， 停止 顏色 ， 停止 顏色 ）
- 首先，用名稱linear -gradient定義漸變類型。
- 然後，您可以通過以下兩種方式之一來定義漸變的開始點和停止點：以0度到359度的直線角度，0度直線朝上。 或者使用“側面或角落”功能，例如左側，右側，底部和頂部。 這些將在下一頁更詳細地解釋。 如果將這些排除，則漸變將從元素的頂部流向底部。
- 然後你定義彩色中止。 您可以使用顏色代碼和可選百分比來定義顏色停留。 該百分比告訴瀏覽器在線上以該顏色開始或結束的位置。 默認設置是沿著線條均勻地放置顏色。 您將在第3頁學習更多關於色彩停止的知識。
所以，要用CSS3定義上面的漸變，你可以這樣寫：
線性梯度（左，＃999999 0％，#ffffff 100％）;
並將其設置為您編寫的DIV的背景：
div {
background-image：線性漸變（左，＃999999 0％，#ffffff 100％;
}
瀏覽器擴展CSS3線性漸變
為了讓您的漸變能夠跨瀏覽器使用，您需要為大多數瀏覽器使用瀏覽器擴展，並為Internet Explorer 9及更低版本（實際上是2個過濾器）使用過濾器。 所有這些都採用相同的元素來定義您的漸變（除了您只能在IE中定義2色漸變）。
微軟過濾器和擴展 - 互聯網瀏覽器是最具挑戰性的支持，因為你需要三條不同的線路來支持不同的瀏覽器版本。 要獲得上面的灰色到白色漸變，你會寫：
/ * IE 5.5-7 * /
filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃999999'，endColorstr ='＃ffffff'，GradientType = 1）;
/ * IE 8-9 * /
-ms-filter：“progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃999999'，endColorstr ='＃ffffff'，GradientType = 1）”;
/ * IE 10 * /
-ms-linear-gradient（left，＃999999 0％，#ffffff 100％）;
Mozilla擴展 - -moz-擴展的工作方式與CSS3屬性類似，只是-moz-擴展。 要獲得Firefox的上述漸變，請寫下：
-moz-linear-gradient（left，＃999999 0％，#ffffff 100％）;
Opera擴展 - -o擴展為Opera 11.1+添加了漸變效果。 要獲得上述漸變，請寫下：
-o-linear-gradient（left，＃999999 0％，#ffffff 100％）;
Webkit擴展 -webkit擴展的工作方式與CSS3屬性非常相似。 要為Safari 5.1或Chrome 10+定義上述漸變，請編寫以下代碼：
-webkit-linear-gradient（left，＃999999 0％，#ffffff 100％）;
還有一個老版本的Webkit擴展，可以與Chrome 2+和Safari 4+配合使用。 在其中，您可以將漸變的類型定義為值，而不是在屬性名稱中。 要使用此擴展名將灰色漸變為白色漸變，請寫下：
-webkit-gradient（線性，左上，右上，停止顏色（0％，＃999999），停止顏色（100％，＃ffffff））;
完整的CSS3線性漸變CSS代碼
要獲得完整的跨瀏覽器支持以獲得上面的灰色到白色漸變，首先應該為不支持漸變的瀏覽器提供後備純色，最後一項應該是完全符合瀏覽器的CSS3樣式。 所以，你寫道：
背景：＃999999;
背景：-moz-linear-gradient（left，＃999999 0％，#ffffff 100％）;
背景：-webkit-gradient（線性，左上，右上，顏色停止（0％，＃999999），停止顏色（100％，＃ffffff））;
background：-webkit-linear-gradient（left，＃999999 0％，#ffffff 100％）;
背景：-o-linear-gradient（left，＃999999 0％，#ffffff 100％）;
背景：-ms-linear-gradient（left，＃999999 0％，#ffffff 100％）;
filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃999999'，endColorstr ='＃ffffff'，GradientType = 1）;
-ms-filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃999999'，endColorstr ='＃ffffff'，GradientType = 1）;
背景：線性漸變（左，＃999999 0％，#ffffff 100％）;
本教程的下一頁將更詳細地解釋漸變的各個部分，最後一頁將指向一個工具，該工具是自動創建CSS3漸變的絕佳方式。
只用CSS就可以看到這個線性漸變。
04年02月
創建對角漸變 - 漸變的角度
起點和終點確定梯度的角度。 大多數線性漸變是從上到下或從左到右。 但是可以建立在對角線上移動的漸變。 此頁面上的圖像顯示了一個簡單的漸變，從右向左以45度角在整個圖像上移動。
角度定義漸變線
角度是元素中心的一個假想圓上的一條線。 0deg指向上，90deg指向右側，180deg指向下，270deg指向左側。 您可以定義0到359度之間的任何角度。
您應該注意，在正方形中，45度角從左上角移動到右下角，但在矩形中，開始點和結束點稍微偏離形狀，如圖所示。
定義對角線漸變的更常用方法是定義一個角，如右上角，漸變將從該角移動到對角。 您可以使用以下關鍵字定義起始位置：
- 最佳
- 對
- 底部
- 剩下
- 中央
它們可以被組合成更具體的，例如：
- 右上
- 左上方
- 頂尖中心
- 右下角
- 左下方
- 底部中心
- 正確的中心
- 左中心
這裡是與圖片類似的漸變的CSS，從右上角到左下角的紅色到白色：
背景：## 901A1C;
background-image：-moz-linear-gradient（右上角，＃901A1C 0％，＃FFFFFF 100％）;
background-image：-webkit-gradient（線性，右上，左下，停止顏色（0，＃901A1C），停止顏色（1，#FFFFFF））;
背景：-webkit-linear-gradient（右上角，＃901A1C 0％，#ffffff 100％）;
背景：-o-linear-gradient（右上角，＃901A1C 0％，#ffffff 100％）;
背景：-ms-linear-gradient（右上角，＃901A1C 0％，#ffffff 100％）;
背景：線性梯度（右上角，＃901A1C 0％，#ffffff 100％）;
您可能已經註意到在這個例子中沒有IE過濾器。 這是因為IE只允許兩種類型的過濾器：從頂部到底部（默認）和從左到右（使用GradientType = 1開關）。
只用CSS就可以看到這個對角線性漸變。
03之04
顏色停止
使用CSS3線性漸變，您可以將多種顏色添加到漸變中以創建更出色的效果。 要添加這些顏色，請在屬性的末尾添加其他顏色，並用逗號分隔。 你應該包括顏色應該開始或結束的位置。
Internet Explorer過濾器僅支持兩種顏色停止，因此，在構建此漸變時，應僅包含要顯示的第一種和第二種顏色。
以下是上述3色漸變的CSS：
背景：#ffffff;
背景：-moz-linear-gradient（left，#ffffff 0％，＃901A1C 51％，#ffffff 100％）;
背景：-webkit-gradient（線性，左上方，右上方，顏色停止（0％，＃ffffff），停止顏色（51％，＃901A1C），停止顏色（100％，＃ffffff））;
background：-webkit-linear-gradient（left，#ffffff 0％，＃901A1C 51％，＃ffffff 100％）;
背景：-o-linear-gradient（left，#ffffff 0％，＃901A1C 51％，＃ffffff 100％）;
背景：-ms-linear-gradient（left，#ffffff 0％，＃901A1C 51％，＃ffffff 100％）;
filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃ffffff'，endColorstr ='＃ffffff'，GradientType = 1）;
背景：線性漸變（左，#ffffff 0％，＃901A1C 51％，＃ffffff 100％）;
只用CSS就可以看到這個線性漸變，其中有三個顏色停止點。
04年4月
使建築物漸變更容易
有兩個網站我建議幫助你建立漸變，他們每個人都有優點和缺點，我還沒有找到一個漸變的建設者，一切都還沒完成。
終極CSS漸變發生器
此漸變生成器非常受歡迎，因為它以類似於Photoshop等程序中的漸變構建器的方式執行。 我也喜歡它，因為它給了你所有的CSS擴展，而不僅僅是Webkit和Mozilla。 這個發生器的問題是它只支持水平和垂直梯度。 如果你想做對角線梯度，你必須去我推薦的另一個發電機。
CSS3漸變發生器
這台發電機讓我花了一點時間才比第一台更理解，但它確實支持將方向改為對角線。
如果您知道另一個比這更好的CSS漸變生成器，請告訴我們 。