漸層

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

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

一開始您可能會認為需要從設計工具匯出圖片。 但您可以使用 linear-gradient敬上 。

漸層是一種圖片,可以在任何圖片皆可使用 而是透過 CSS 製作,並由顏色、數字和角度組成。 CSS 漸層 可讓您使用兩種顏色間的流暢漸層來建立任何物件 可以混合並重複不同的漸層來美化圖片

線性漸層

瀏覽器支援

  • Chrome:26.
  • Edge:12.
  • Firefox:16.
  • Safari:7.

資料來源

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() 中新增多個顏色和顏色停止點,數量不限。 您也能用半形逗號分隔每個漸層,在漸層上相輔相成

放射漸層

瀏覽器支援

  • Chrome:26.
  • Edge:12.
  • Firefox:16.
  • Safari:7.

資料來源

如要建立以圓形散射的漸層效果, 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

錐形漸層

瀏覽器支援

  • Chrome:69.
  • Edge:79,
  • Firefox:83。
  • Safari:12.1.

資料來源

錐形漸層在方塊中有中心點,並從頂端開始 (預設值)。 並且繞著 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 屬性上混合漸層函式 並依個人需求定義任意數量的漸層 就像背景圖片一樣 舉例來說,您可以混用多個線性漸層,或兩個具有放射漸層的線性漸層。

資源

隨堂測驗

測試您對漸層的瞭解

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

3
4
1
2

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