Andy Blog
0%

CSS3 漸層應用

Posted on Edited on Disqus:

CSS3漸層

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

預測的漸層是由top到bottom

1
background: linear-gradient(black, yellow)

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

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

要建立多種顏色漸層

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

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

1
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參考文件連結