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
屬性支援許多漸層,只需以半形逗號分隔即可。