漸層

CSS Podcast - 021：漸層

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

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

一開始您可能會認為需要從設計工具匯出圖片。 但您可以使用 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 屬性上混合漸層函式 並依個人需求定義任意數量的漸層 就像背景圖片一樣 舉例來說，您可以混用多個線性漸層，或兩個具有放射漸層的線性漸層。

資源

隨堂測驗

測試您對漸層的瞭解

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

1
請再試一次！
2
可以相同顏色並顯示為純色，但至少必須提供 2 種顏色。
3
請再試一次！
4
請再試一次！

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

是
background-image 屬性允許多個漸層，只需使用逗號分隔即可。
否
噢，但他們可以！