Skip to main content

CSS3 漸層

使用 CSS 裡面的 linear-gradient()函數來建立一個漸層的背景。

預測的漸層是由 top 到 bottom

background: linear-gradient(black, yellow)

要建立由左上到右下的漸層

background: linear-gradient(to right bottom, black, yellow)

要建立多種顏色漸層

background: linear-gradient(to right, black, blue, yellow)

多種顏色不同比例方向漸層

background: linear-gradient(145deg, green 25%, red 25%       80%, blue 80%)

簡單來說語法可以拆成方向與顏色組兩類。

  • 方向可以是 to (right, left, top, bottom) 或是 to (right bottom, left top ......)，甚至適用 deg 角度都可以

  • 顏色組則是愈漸層的顏色有哪些，同時也可以設定哪個顏色漸層部分要佔比較大的比例。 ex：上述的 green 25%, red 25% 80%, blue 80%就是綠色佔前 25%，紅色佔中間 25%到 80%（也就是 55%），藍色佔最後 20%。

  • codepen 參考連結

  • MDN 參考文件連結