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