CSS repeating-linear-gradient
方法 創(chuàng)造一個(gè)可重復(fù)的漸變。它接受和普通線性漸變相同的屬性值并且表現(xiàn)也一致鸠澈。
但它會(huì)自動(dòng)在延伸的方向上重復(fù) color stops卸夕。每段起始和結(jié)束的 color stop 之間是一個(gè)基本的線性漸變层释。用一張圖看出線性漸變和可重復(fù)漸變的區(qū)別。
different btw repeating and common
語(yǔ)法
同志快集，要學(xué)會(huì)看語(yǔ)法贡羔。
Formal grammar: repeating-linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
where <side-or-corner> = [left | right] || [top | bottom]
and <color-stop> = <color> [ <percentage> | <length> ]?
excuse me
舉例
算啦算啦，還是看例子吧碍讨。
- 最簡(jiǎn)單的例子治力，效果如上面第一張圖
background-image:
repeating-linear-gradient(#cdf0ff, #0ca0e9 25%);
- 程序猿GG喜歡的格子襯衫
background-image:
repeating-linear-gradient(transparent, transparent 23%, #1294f6 23%, #1294f6 27%),
repeating-linear-gradient(90deg, transparent, transparent 23%, #1294f6 23%, #1294f6 27%);
grid
溫馨提示：要想實(shí)現(xiàn)漸變的邊緣是硬的，至少需要四個(gè) color-step勃黍，并且中間兩個(gè)的位置要相等宵统，但顏色不同。
- 條紋紋理
background-image:
repeating-linear-gradient(45deg, transparent, transparent 20px, #1294f6 20px, #1294f6 40px)
texture
- 進(jìn)度條
將上面例子中元素的高度減小，寬度增大马澈，可以得到常見的進(jìn)度條效果瓢省。
width: 226px;
height: 20px;
background-image:
repeating-linear-gradient(45deg, transparent, transparent 20px, #1294f6 20px, #1294f6 40px);
progress
還可以為進(jìn)度條添加從左向右滾動(dòng)的動(dòng)畫。想要?jiǎng)赢嬤B貫痊班，對(duì)元素的寬高有一定的要求勤婚。
animation: loading 5s linear infinite;
@keyframes loading {
from { background-position-x: 0px; }
to { background-position-x: 226px; }
}
Bootstrap 的進(jìn)度條是用普通的 linear-gradient 實(shí)現(xiàn)的，具體的查查字典涤伐。
兼容性
冒著沒電的危險(xiǎn)查了下 Can I use 簡(jiǎn)化版 小程序（nm這都有小程序馒胆，我眉頭一緊，覺得事情并不簡(jiǎn)單）凝果。
很開心只有0.01%的瀏覽器不兼容祝迂，IE8再見。
compatibility
