CSS3中提供了多種漸變樣式,其中線性漸變是最常用的一種。而在線性漸變中,重復線性漸變又是一種常見的樣式。
重復線性漸變可以在一個區(qū)域內(nèi)不斷重復一個線性漸變效果,非常適合用于背景、邊框等需要重復的場景中。
/* 重復線性漸變語法 */ background: repeating-linear-gradient(direction, color-stop1, color-stop2, ...); /* 示例 */ background: repeating-linear-gradient(to bottom, #f4f4f4, #f4f4f4 30px, #e0e0e0 30px, #e0e0e0 60px);
在上面的代碼中,我們使用了repeating-linear-gradient
來定義重復線性漸變。
direction
表示漸變方向,可以是to left/right/top/bottom
等。
color-stopX
表示漸變顏色和停止位置。例如,#f4f4f4
表示漸變到淺灰色,30px
表示在區(qū)域的30像素處停止?jié)u變,開始使用下一個顏色。
通過不斷調(diào)整color-stop
的值,可以實現(xiàn)更多樣化的重復線性漸變效果。
上一篇css3 豎 時間軸
下一篇css設置圖片貼近下部