漸層

CSS Podcast - 021：漸層

假設您有一個要建置的網站介紹完標題、摘要和按鈕設計人員已移植到紫色背景，介紹這段說明。唯一的問題是背景呈現兩種紫色的紫色深淺。該怎麼做？

深紫色的漸層背景，以及標題、段落和連結。

一開始您可能會認為需要從設計工具匯出圖片。但您可以使用 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 漸層指南
漸層產生器

隨堂測驗

測試您對漸層的瞭解

建立漸層時需要「最小」顏色數量？

請再試一次！

可以相同顏色並顯示為純色，但至少必須提供 2 種顏色。

請再試一次！

元素可以有多種漸層做為背景？

是

background-image 屬性允許多個漸層，只需使用逗號分隔即可。

否

噢，但他們可以！