CSS 漸層-多層次漸層

最簡單的漸層只需指定兩組過渡的顏色,如果要建立多層次的漸層,可以指定更多的顏色值,效果如下:


此漸層由三組顏色組成,分別是 red、orange與violet ,所需的樣式設定如下:

background:-webkit-linear-gradient(left,red,orange 47%,violet);  

依序指定組成漸層的顏色,然後設定每一組顏色最後結束的位置,以上除了 left 參數表示漸層從最左邊開始,第一組顏色是 red ,第二組是 orange ,緊接著 47% 表示 orange 這一組顏色在整個漸層位置的 47% 位值結束,然後接續開始呈現 violet 一直到最後結束。

你可以根據所需的顏色種類進行設定,例如以下的彩虹漸層:


其中包含了七組顏色:red,orange,yellow,green,blue,indigo,violet,並且平均分配在七個位置,所需的設定如下:

background:-webkit-linear-gradient(left,
red,
orange 17%,
yellow 34%,
green 51%,
blue 68%,
indigo 85%,
violet);  


沒有留言: