CSS repeating-linear-gradient
方法
創(chuàng)造一個(gè)可重復(fù)的漸變。它接受和普通線性漸變相同的屬性值并且表現(xiàn)也一致。
但它會(huì)自動(dòng)在延伸的方向上重復(fù) color stops。每段起始和結(jié)束的 color stop 之間是一個(gè)基本的線性漸變。
用一張圖看出線性漸變和可重復(fù)漸變的區(qū)別。
語法
同志，要學(xué)會(huì)看語法。
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> ]?
舉例
算啦算啦，還是看例子吧。
1、最簡單的例子，效果如上面第一張圖
background-image: repeating-linear-gradient(#cdf0ff, #0ca0e9 25%);
2、程序猿GG喜歡的格子襯衫
background-image: repeating-linear-gradient(transparent, transparent 23%, #1294f6 23%, #1294f6 27%), repeating-linear-gradient(90deg, transparent, transparent 23%, #1294f6 23%, #1294f6 27%);
溫馨提示：要想實(shí)現(xiàn)漸變的邊緣是硬的，至少需要四個(gè) color-step，并且中間兩個(gè)的位置要相等，但顏色不同。
3、條紋紋理
background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, #1294f6 20px, #1294f6 40px)
4、進(jìn)度條
將上面例子中元素的高度減小，寬度增大，可以得到常見的進(jìn)度條效果。
width: 226px; height: 20px; background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, #1294f6 20px, #1294f6 40px);
還可以為進(jìn)度條添加從左向右滾動(dòng)的動(dòng)畫。想要?jiǎng)赢嬤B貫，對元素的寬高有一定的要求。
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 簡化版 小程序（nm這都有小程序，我眉頭一緊，覺得事情并不簡單）。
很開心只有0.01%的瀏覽器不兼容，IE8再見。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如有疑問大家可以留言交流，謝謝大家對武林網(wǎng)的支持。
參考
文靜的ppt
MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/repeating-linear-gradient
Codepen：https://codepen.io/binbin/pen/bRawQv
新聞熱點(diǎn)
疑難解答
圖片精選
