CSS Podcast - 021: Gradients
假設您有一個要建構的網站，頂端會顯示包含標題、摘要和按鈕的簡介。設計人員已遞交設計為紫色背景的設計來介紹這項功能。唯一的問題是背景使用兩種紫色的漸層。該怎麼做？
您一開始可能會認為需要從設計工具匯出圖片，但可以改用 linear-gradient。
漸層是一種圖片，可在任何可以使用圖片的任何位置使用，但可透過 CSS 建立，由顏色、數字和角度組成。CSS 漸層可讓您使用兩種顏色之間的流暢漸層來建立任何元素，並藉由混合及重複套用多個漸層，製作出令人驚豔的藝術作品。
線性漸層
linear-gradient() 函式會逐步產生兩種以上顏色的圖片。這會使用多個引數，但在最簡單的設定中，您可以傳遞這類顏色，這樣在混合這些顏色時，就會自動平均分割。
.my-element {
background: linear-gradient(black, white);
}
您也可以傳送代表特定角度的角度或關鍵字。如果您選擇使用關鍵字，請在 to 關鍵字後方指定方向。也就是說，如果您想讓從左 (黑色) 到右 (白色) 的黑白漸層，就可以將角度指定為 to right 做為第一個引數。
.my-element {
background: linear-gradient(to right, black, white);
}
定義顏色停止點並與鄰點混合的顏色停止值。如果是以 45 度角搭配深色紅色跑步的漸層，漸層大小有 30% 變成更淺的紅色，如下所示。
.my-element {
background: linear-gradient(45deg, darkred 30%, crimson);
}
您可以在 linear-gradient() 中視需要新增任意數量的顏色和顏色停止點，並且可以使用半形逗號分隔各個漸層，以圖層相疊。
放射漸層
如要建立以圓形方式放射的漸層，請協助 radial-gradient() 函式採取行動。與 linear-gradient() 類似，但您可以選擇指定位置和結束形狀，而不需要指定角度。如果您僅指定顏色，radial-gradient() 會自動選取位置為 center，並根據方塊大小選取圓形或橢圓形。
.my-element {
background: radial-gradient(white, black);
}
漸層的位置類似於使用關鍵字和/或數值的 background-position。放射漸層的大小會決定漸層的結束形狀大小 (圓形或橢圓形)，預設為 farthest-corner，表示它與方塊中心的最遠角完全相符。您也可以使用下列關鍵字：
closest-corner會到達最接近漸層中心的角落。closest-side會配合最靠近漸層中心的方塊側邊。farthest-side將執行與closest-side的相反動作。
您可以加入任意數量的停止點，就像加入 linear-gradient 一樣。同樣地，您也可以視需要新增多個 radial-gradients。
錐狀漸層
圓環在方塊內會有一個中心點，而且從頂端開始 (預設值)，然後圍繞著 360 度圓形。
.my-element {
background: conic-gradient(white, black);
}
conic-gradient() 函式可接受位置和角度引數。
根據預設，角度為 0 度，從上方置中即為 0 度。如要將角度設為 45deg，位於右上角。角引數可接受任何類型的角度值，例如線性和放射漸層。
根據預設，此位置為置中。與放射和線性漸層一樣，定位可以是關鍵字式，也可以用數值定義。
您可以視需要新增多個顏色停止點，和其他漸層類型一樣。 使用 CSS 呈現圓餅圖是使用這項功能的理想用途。
循環播放
每種漸層類型也都有重複類型。這些是 repeating-linear-gradient()、repeating-radial-gradient() 和 repeating-conic-gradient()。這些函式與非重複函式類似，且具有相同的引數。不同之處在於，如果定義的漸層可重複填滿方塊，根據這兩個大小，就會出現。
如果漸層並未重複出現，表示您可能尚未為其中一個色彩停靠點設定長度。舉例來說，您可以設定顏色停止長度，使用 repeating-linear-gradient 建立條紋背景。
.my-element {
background: repeating-linear-gradient(
45deg,
red,
red 30px,
white 30px,
white 60px
);
}
您也可以在 background 屬性上混用漸層函式，以及定義各種漸層，就像使用背景圖片一樣。舉例來說，您可以混用多個線性漸層，或兩個有放射漸層的線性漸層。
資源
隨堂測驗
測驗您對漸層的相關知識
建立漸層所需的顏色「下限」為何？
元素可以有多個漸層做為背景嗎？
background-image 屬性支援許多漸層，只需以半形逗號分隔即可。