CSS3提供了豐富的漸變效果,其中之一就是重復線性漸變。重復線性漸變的特點是可以在一定區域內重復出現,創建出極具藝術感的效果。
/* 重復線性漸變 */ background: repeating-linear-gradient(to right, red, orange 10%, yellow 20%, green 30%, blue 40%, indigo 50%, violet 60%);
代碼中,我們使用了“repeating-linear-gradient”來定義重復線性漸變。其中,“to right”表示從左到右的漸變方向,后面緊跟的是顏色的變化規則,使用類似于“顏色 偏移量”的方式來表示不同顏色的位置和比例。
/* 重復線性漸變(多行) */ background: repeating-linear-gradient(to right, red, orange 10%, yellow 20%, green 30%, blue 40%, indigo 50%, violet 60%), repeating-linear-gradient(to bottom, red, orange 10%, yellow 20%, green 30%, blue 40%, indigo 50%, violet 60%);
除了可以在一個方向上進行重復漸變外,還可以在多個方向上進行重復漸變,只需要在代碼中添加多個“repeating-linear-gradient”的定義即可。
重復線性漸變不僅適用于背景色的定義,還可以用于邊框、文本顏色等各種CSS屬性的定義,讓頁面設計更加豐富多彩。