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
屬性上混合漸層函式
並依個人需求定義任意數量的漸層
就像背景圖片一樣
舉例來說,您可以混用多個線性漸層,或兩個具有放射漸層的線性漸層。
資源
隨堂測驗
測試您對漸層的瞭解
建立漸層時需要「最小」顏色數量?
元素可以有多種漸層做為背景?