1．線性漸變
linear-gradient() 函數用於創建一個線性漸變的“圖像”。其一般調用格式為：
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
其中，參數direction可選，用來指定漸變的方向（或角度），采用角度定義漸變的方向時，角度從0deg到360deg，默認為180deg，也可取負值（表示逆時針方向）；還可以采用“to …”的方式指定漸變方向，to后面可以跟兩個關鍵字：一個指定水平位置（left 或 right)），另一個指定垂直位置（top 或bottom），兩個關鍵字順序是隨意的，每個關鍵字都是可選的。例如，to right等價於90deg， 180deg等價於to bottom。
參數color-stop1, color-stop2,...用於指定漸變的起止顏色。每個顏色由顏色值、停止位置（可選，也可使用百分比指定）組成。起止顏色參數定義時至少得定義兩個（哪怕兩個顏色一樣）。
repeating-linear-gradient() 函數用於創建重復的線性漸變“圖像”。其一般調用格式為：
background: repeating-linear-gradient(direction, color-stop1, color-stop2, ...);
設在頁面中有<div class="shape"></div>，若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid;
background-image: linear-gradient(to right, red , yellow);
}
可在頁面中顯示如圖1所示的圖案。圖1中線性漸變是從左側開始的，顏色從紅色開始，漸變轉為黃色。
圖1 紅黃漸變（1）
若修改.shape樣式中background-image屬性定義為：
background-image: linear-gradient(to bottom right, red , yellow);
則在頁面中顯示如圖2所示的圖案。圖2中線性漸變是從左上角到右下角進行，顏色同樣從紅色開始，漸變轉為黃色。
圖2 紅黃漸變（2）
線性漸變可以指定多個顏色，例如若修改.shape樣式中background-image屬性定義為：
background-image: linear-gradient(to right, red,orange,yellow,green,indigo,blue,violet);
則在頁面中顯示如圖3所示的圖案。
圖3 七彩漸變
線性漸變中指定的顏色可以使用透明度，例如若修改.shape樣式中background-image屬性定義為：
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
則在頁面中顯示如圖4所示的圖案。
圖4 使用了透明度的紅色漸變
線性漸變中指定的顏色還可以定義停止位置，例如若修改.shape樣式中background-image屬性定義為：
background-image: linear-gradient(to right, red 50%, yellow 50%);
或 background-image: linear-gradient(to right, red 200px, yellow 200px);
則均在頁面中顯示如圖5所示的圖案。此時，紅黃兩種顏色均分背景空間，取消了漸變效果。
圖5 紅黃各占一半
若修改.shape樣式中background-image屬性定義為：
background-image: linear-gradient(to right, red 33%, yellow 33%, yellow 66%,blue 66%);
則在頁面中顯示如圖6所示的圖案。此時，紅黃藍三種顏色均分背景空間，同樣取消了漸變效果。
圖6 紅黃藍三分背景空間
若修改.shape樣式中background-image屬性定義為：
background-image: linear-gradient(to right, red 33%, yellow 66%,blue 66%);
則在頁面中顯示如圖7所示的圖案。注意圖7與圖6的差別，圖7中間三分之一是紅色向黃色的線性漸變。
圖7 紅藍之間紅黃漸變
若修改.shape樣式中background-image屬性定義為：
background-image: linear-gradient(135deg, red 33%, yellow 33%,yellow 66%,blue 66%);
則在頁面中顯示如圖8所示的圖案。
圖8 紅黃藍三色圖案
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid;
background-image: linear-gradient(to right
,red 0 , red 50px , yellow 50px , yellow 100px ) ;
background-size: 100px 100%;
background-repeat:no-repeat;
}
可在頁面中顯示如圖9所示的紅色和黃色兩個豎條。圖中看出黃色豎條的右邊是白色（背景色），這是由於背景的大小定義為100px 100%，又定義了背景圖像不重復，因此只顯示一個紅色和一個黃色豎條。
圖9 紅黃豎條
若去掉上面.shape樣式定義中的“background-repeat:no-repeat;”一句，或將其改寫為“background-repeat:repeat;”，則在頁面中顯示如圖10所示的圖案。因為此時背景被設置為重復，因此紅色和黃色豎條重復填充滿背景，從而呈現出紅黃相間的圖案。
圖10 紅黃相間豎條紋
若再將定義背景大小的“background-size: 100px 100%;”語句也去掉，則在頁面中顯示如圖11所示的圖案。此時，除了開始的一個寬度為50px的紅色豎條外，黃色充滿了其余的背景空間。這是因為linear-gradient函數調用中給出的最后一個顏色是線性漸變的終止顏色，這樣從水平位置100px~400px的背景空間同樣用黃色填充。
圖11 紅黃填充背景圖案
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid;
background-image: repeating-linear-gradient(to right
,red 0 , red 50px , yellow 50px , yellow 100px ) ;
}
同樣可在頁面中顯示如圖10所示的紅黃相間豎條紋圖案。
2．利用線性漸變繪制圖形
利用線性漸變可以繪制出圖形，下面給出一些示例。
（1）黑白條紋。
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid;
background-image: linear-gradient(0deg, #000 50%, #fff 50%);
background-size: 100% 50px;
}
可在頁面中顯示如圖12所示的水平黑白條紋圖案。
圖12 水平黑白條紋（1）
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid;
background-image: linear-gradient(0deg, #000 5px, #fff 5px,#fff 25px,
#000 25px,#000 45px,#fff 45px);
background-size: 100% 50px;
}
可在頁面中顯示如圖13所示的水平黑白條紋圖案。此時的黑白條紋不均勻，但也有規律。
圖13 水平黑白條紋（2）
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid;
background-image: linear-gradient(90deg, #000 50%, #fff 50%);
background-size: 50px 100%;
}
可在頁面中顯示如圖14所示的垂直黑白條紋圖案。
圖14 垂直黑白條紋
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid;
background-image: linear-gradient(45deg, #000 25%, #fff 25%, #fff 50%, #000 50%, #000 75%, #fff 75%);
background-size:50px 50px ;
}
可在頁面中顯示如圖15所示的黑白斜條紋圖案。
圖15 黑白斜條紋（1）
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid;
background-image: repeating-linear-gradient(60deg, #000, #000 15px, #fff 0, #fff 30px);
}
可在頁面中顯示如圖16所示的黑白斜條紋圖案。
圖16 黑白斜條紋（2）
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid;
background:linear-gradient(60deg,#000 25%,#fff 0,#fff 50%,#000 0,#000 75%,#fff 0);
background-size:50px 50px;
}
可在頁面中顯示如圖17所示的黑白斜條紋圖案。
圖17 黑白斜條紋（3）
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid;
background-image: repeating-linear-gradient(45deg, #000, #fff 30px);
}
可在頁面中顯示如圖18所示的黑白漸變斜條紋圖案。
圖18 黑白漸變斜條紋
若定義.shape的樣式規則為：
.shape
{
position: absolute;
width: 400px;
height: 300px;
border: 1px solid;
background:linear-gradient(45deg,#000 25%,#fff 0,#fff 50%,#000 0,#000 75%,#fff 0);
background-size:50px 50px;
}
.shape:after
{
content: '';
position: absolute;
top:20px;
left:20px;
width:360px;
height:260px;
background-color:#fff;
}
可在頁面中顯示如圖19所示的信封圖案。它是通過在黑白斜條紋圖案中間填充一個白色矩形得到的。
圖19 信封
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width:350px;
height: 500px;
border: 1px solid;
background-image: repeating-linear-gradient(#fff 0 , #fff 49px , #999 49px, #999 50px);
}
可在頁面中顯示如圖20所示的信紙圖案。
圖20 信紙
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid;
background-image: linear-gradient(-45deg, #000 50%, #fff 50%);
background-size:50px 100% ;
}
可在頁面中顯示如圖21所示的鋸齒圖案。
圖21 鋸齒圖案
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid;
background-image: linear-gradient(to bottom right, #000 50%, #fff 50%);
background-size:50px 50px ;
}
可在頁面中顯示如圖22所示的黑白三角形拼圖圖案。
圖22 黑白三角形拼圖
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 300px;
height: 300px;
border: 1px solid;
background:linear-gradient(45deg,#000 25%,transparent 25%),
linear-gradient(-45deg,#000 25%,transparent 25%),
linear-gradient(45deg,transparent 75%,#000 75%),
linear-gradient(-45deg,transparent 75%,#000 75%);
background-size:50px 50px;
}
可在頁面中顯示如圖23所示的黑白菱形拼圖圖案。
圖23 黑白菱形拼圖
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 400px;
height: 400px;
border: 1px solid;
background-image: linear-gradient(45deg,#000 25%, transparent 0, transparent 75%, #000 0),
linear-gradient(45deg,#000 25%, transparent 0, transparent 75%, #000 0);
background-size: 100px 100px;
background-position: 0 0,50px 50px;
}
可在頁面中顯示如圖24所示的國際象棋棋盤圖案。
圖24 國際象棋棋盤
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid;
background: linear-gradient(-45deg, white 25%, transparent 25%,
transparent 75%, black 75%, black) 0 0,
linear-gradient(-45deg, black 25%, transparent 25%,
transparent 75%, white 75%, white) 40px 40px;
background-color: white;
background-size: 80px 80px;
}
可在頁面中顯示如圖25所示的黑色方框有規律分布的圖案。
圖25 有規律分布的黑色方框
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid;
background: linear-gradient(-45deg, white 25%, transparent 25%,
transparent 75%, black 75%, black) 0 0,
linear-gradient(-45deg, black 25%, transparent 25%,
transparent 75%, white 75%, white) 40px 40px,
linear-gradient(45deg, black 17%, transparent 17%,
transparent 25%, black 25%, black 36%, transparent 36%,
transparent 64%, black 64%, black 75%, transparent 75%,
transparent 83%, black 83%) 40px 40px;
background-color: white;
background-size: 80px 80px;
}
可在頁面中顯示如圖26所示的千鳥格圖案。
圖26 千鳥格圖案
（2）格子布。
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid;
background-image: repeating-linear-gradient(rgba(255, 0, 0, .3) 0,
rgba(255, 0, 0, .3) 20px ,rgba(255, 255, 0, .3) 20px,
rgba(255, 255, 0, .3) 40px ),
repeating-linear-gradient(to right, rgba(255, 0, 0, .3) 0,
rgba(255, 0, 0, .3) 20px , rgba(255, 255, 0, .3) 20px,
rgba(255, 255, 0, .3) 40px );
}
可在頁面中顯示如圖27所示的橙黃相間的格子布圖案。
圖27 格子布
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid;
background-image: repeating-linear-gradient(45deg, rgba(255, 0, 0, .3) 0,
rgba(255, 0, 0, .3) 20px ,rgba(255, 255, 0, .3) 20px,
rgba(255, 255, 0, .3) 40px ),
repeating-linear-gradient(-45deg, rgba(255, 0, 0, .3) 0,
rgba(255, 0, 0, .3) 20px ,rgba(255, 255, 0, .3) 20px,
rgba(255, 255, 0, .3) 40px );
}
可在頁面中顯示如圖28所示的橙黃相間的斜紋布圖案。
圖28 斜紋布圖案
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 400px;
height: 400px;
border: 1px solid;
background-image:
repeating-linear-gradient(90deg, transparent, transparent 50px,
rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
transparent 56px, transparent 63px,
rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
transparent 69px, transparent 116px,
rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
repeating-linear-gradient(0deg, transparent, transparent 50px,
rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
transparent 56px, transparent 63px,
rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
transparent 69px, transparent 116px,
rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
repeating-linear-gradient(-45deg, transparent, transparent 5px,
rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
repeating-linear-gradient(45deg, transparent, transparent 5px,
rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
background-image:
repeating-linear-gradient(90deg, transparent 0 50px,
rgba(255, 127, 0, 0.25) 50px 56px,
transparent 56px 63px,
rgba(255, 127, 0, 0.25) 63px 69px,
transparent 69px 116px,
rgba(255, 206, 0, 0.25) 116px 166px),
repeating-linear-gradient(0deg, transparent 0 50px,
rgba(255, 127, 0, 0.25) 50px 56px,
transparent 56px 63px,
rgba(255, 127, 0, 0.25) 63px 69px,
transparent 69px 116px,
rgba(255, 206, 0, 0.25) 116px 166px),
repeating-linear-gradient(-45deg, transparent 0 5px,
rgba(143, 77, 63, 0.25) 5px 10px),
repeating-linear-gradient(45deg, transparent 0 5px,
rgba(143, 77, 63, 0.25) 5px 10px);
}
可在頁面中顯示如圖29所示的布紋圖案。
圖29 布紋圖案
（3）磚牆。
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid;
background-color: silver;
background-image: linear-gradient(335deg, #b00 23px, transparent 23px),
linear-gradient(155deg, #d00 23px, transparent 23px),
linear-gradient(335deg, #b00 23px, transparent 23px),
linear-gradient(155deg, #d00 23px, transparent 23px);
background-size: 58px 58px;
background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
}
可在頁面中顯示如圖30所示的磚牆圖案。
圖30 磚牆
若定義.shape的樣式規則為：
.shape
{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid rgba(50, 50, 50, 0.9);
background-color:#6A5ACD;
background-image:repeating-linear-gradient(120deg, rgba(255,255,255,.1),
rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
repeating-linear-gradient(60deg, rgba(255,255,255,.1),
rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%,
transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%,
transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
background-size: 70px 120px;
}
可在頁面中顯示如圖31所示的瓷磚牆面圖案。
圖31 瓷磚牆面
3．線性漸變在動畫制作中的應用實例
利用線性漸變繪制圖形，定義適當的關鍵幀，可以實現動畫效果。
（1）Loading動畫。
例如，制作如圖32所示的Loading動畫效果。
圖32 Loading動畫
在這個動畫中，有五個豎條，每個豎條有長和短兩種狀態，整個動畫過程中，有6個關鍵幀：5個豎條全為短狀態、第1個豎條長狀態其余豎條短狀態、第2個豎條長狀態其余豎條短狀態、…、第5個豎條長狀態其余豎條短狀態。采用線性漸變直接描述這6種狀態是一種可行的辦法。
編寫的HTML文件如下。
<!DOCTYPE html> <html> <head> <title>Loading</title> <style> .container { margin: 0 auto; width: 300px; height:300px; background:#d8d8d8; border: 4px solid rgba(255, 0, 0, 0.9); border-radius: 10%; } .loader { margin: 50px auto; width: 240px; height: 160px; background: linear-gradient(#FF1493, #FF1493) 0 50%, linear-gradient(#FF1493, #FF1493) 50px 50%, linear-gradient(#FF1493, #FF1493) 100px 50%, linear-gradient(#FF1493, #FF1493) 150px 50%, linear-gradient(#FF1493, #FF1493) 200px 50%; background-repeat: no-repeat; background-size: 40px 20px, 40px 20px, 40px 20px, 40px 20px, 40px 20px; animation: anim 1.5s linear infinite; } @keyframes anim { 25% { background: linear-gradient(#00BFFF, #00BFFF) 0 50%, linear-gradient(#FF1493, #FF1493) 50px 50%, linear-gradient(#FF1493, #FF1493) 100px 50%, linear-gradient(#FF1493, #FF1493) 150px 50%, linear-gradient(#FF1493, #FF1493) 200px 50%; background-repeat: no-repeat; background-size: 40px 150px, 40px 20px, 40px 20px, 40px 20px, 40px 20px; } 37.5% { background: linear-gradient(#FF1493, #FF1493) 0 50%, linear-gradient(#00BFFF, #00BFFF) 50px 50%, linear-gradient(#FF1493, #FF1493) 100px 50%, linear-gradient(#FF1493, #FF1493) 150px 50%, linear-gradient(#FF1493, #FF1493) 200px 50%; background-repeat: no-repeat; background-size: 40px 20px, 40px 150px, 40px 20px, 40px 20px, 40px 20px; } 50% { background: linear-gradient(#FF1493, #FF1493) 0 50%, linear-gradient(#FF1493, #FF1493) 50px 50%, linear-gradient(#00BFFF, #00BFFF) 100px 50%, linear-gradient(#FF1493, #FF1493) 150px 50%, linear-gradient(#FF1493, #FF1493) 200px 50%; background-repeat: no-repeat; background-size: 40px 20px, 40px 20px, 40px 150px, 40px 20px, 40px 20px; } 62.5% { background: linear-gradient(#FF1493, #FF1493) 0 50%, linear-gradient(#FF1493, #FF1493) 50px 50%, linear-gradient(#FF1493, #FF1493) 100px 50%, linear-gradient(#00BFFF, #00BFFF) 150px 50%, linear-gradient(#FF1493, #FF1493) 200px 50%; background-repeat: no-repeat; background-size: 40px 20px, 40px 20px, 40px 20px, 40px 150px, 40px 20px; } 75% { background: linear-gradient(#FF1493, #FF1493) 0 50%, linear-gradient(#FF1493, #FF1493) 50px 50%, linear-gradient(#FF1493, #FF1493) 100px 50%, linear-gradient(#FF1493, #FF1493) 150px 50%, linear-gradient(#00BFFF, #00BFFF) 200px 50%; background-repeat: no-repeat; background-size: 40px 20px, 40px 20px, 40px 20px, 40px 20px, 40px 150px; } } </style> </head> <body> <div class="container"> <div class="loader"></div> </div> </body> </html>
（2）移動的斜條紋。
將一個斜條紋在水平方向上移動，編寫如下的HTML文件。
<!DOCTYPE html> <html> <head> <title>移動的斜條紋</title> <style> .container { margin: 0 auto; width: 300px; height: 100px; border: 4px solid gray; overflow:hidden; } .shape { margin: 0 auto; width: 600px; height: 100px; background-image: repeating-linear-gradient(45deg, #f00 0,#f00 15px, #ff0 15px, #ff0 30px); animation: move 5s linear infinite; } @keyframes move { 100% { transform: translateX(-300px); } } </style> </head> <body> <div class="container"> <div class="shape"></div> </div> </body> </html>
在瀏覽器中打開包含這段HTML代碼的html文件，可以呈現出如圖33所示的動畫效果。
圖33 移動的斜條紋
（3）棋盤錯覺。
設有如圖34所示的6行黑白相間方格，讓奇數行和偶數行的方格交錯水平移動，會產生中間橫線傾斜的錯覺。編寫的HTML文件內容如下。
圖34 6行黑白相間方格
<!DOCTYPE html> <html> <head> <title>棋盤錯覺動畫</title> <style> .container { margin: 0 auto; width: 640px; height: 480px; display: flex; flex-direction: column; border-bottom: 4px solid gray; } .shape { width: 640px; height: 80px; background: linear-gradient(gray,gray 4px,transparent 4px,transparent), repeating-linear-gradient(to right,black,black 80px, transparent 80px,transparent 160px); } .shape:nth-child(odd) { animation: move 4s linear infinite; } .shape:nth-child(even) { animation: move 4s linear infinite reverse; } @keyframes move { 0%,55%,100% { background-position: 0 0; } 5%,50% { background-position: 40px 0; } } </style> </head> <body> <div class="container"> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> </div> </body> </html>
在瀏覽器中打開包含這段HTML代碼的html文件，可以呈現出如圖35所示的動畫效果。
圖35 黑白方格移動
在動畫過程中，隨着黑白塊移動，每行看起來都好像斜了，但實際上每一行都是平行的。
（4）菱形繁殖。
在一個正方形方框正中心有一個菱形白色方格，這個白色方格由1個變4個，由4個變成16個，由16個變成64個，…。
編寫的HTML文件內容如下。
<!DOCTYPE html> <html> <head> <title>方格繁殖</title> <style> .container { margin: 0 auto; width: 300px; height: 300px; border: 4px solid gray; } .shape { margin: 0 auto; width: 300px; height: 300px; position: absolute; background:linear-gradient(45deg,#000 25%,transparent 25%), linear-gradient(-45deg,#000 25%,transparent 25%), linear-gradient(45deg,transparent 75%,#000 75%), linear-gradient(-45deg,transparent 75%,#000 75%); animation: anim 8s linear infinite; } @keyframes anim { 0% { background-size:300px 300px; } 20%,25% { background-size:150px 150px; } 45%,50% { background-size:75px 75px; } 70%,75% { background-size:37.5px 37.5px; } 95%,100% { background-size:18.75px 18.75px; } } </style> </head> <body> <div class="container"> <div class="shape"></div> </div> </body> </html>
在瀏覽器中打開包含這段HTML代碼的html文件，可以呈現出如圖36所示的動畫效果。
圖36 白色菱形的繁殖