漸層

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 度，從頂端中心開始。如果將角度設為 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 屬性上混合漸層函式，並視需要定義任意數量的漸層，就像使用背景圖片一樣。舉例來說，您可以將多個線性漸層混合在一起，或是將兩個線性漸層與放射漸層混合。

資源

• Conic.css：實用的圓錐漸層效果集合
• MDN 梯度指南
• 漸層產生器

進行隨堂測驗

測驗您對漸層的瞭解

建立漸層時，需要至少使用幾種顏色？

1

請再試一次！

2

這些圖片可以是相同顏色，且顯示為實心圖片，但至少需要 2 種顏色。

3

請再試一次！

4

請再試一次！

元素可以使用多個漸層做為背景嗎？

是

background-image 屬性可接受多個漸層，只要以半形逗號分隔即可。

否

不，他們可以！