知識(shí)儲(chǔ)備
1.linear-gradient:
參數(shù)：其共有三個(gè)參數(shù)
第一個(gè)參數(shù)表示線性漸變的方向兔魂，top是從上到下栈妆、left是從左到右扛吞，如果定義成left top初肉，那就是從左上角到右下角
第二個(gè)和第三個(gè)參數(shù)分別是起點(diǎn)顏色和終點(diǎn)顏色酷鸦。你還可以在它們之間插入更多的參數(shù)，表示多種顏色的漸變
2.repeat-linear-gradient
測(cè)試
1.基本寫法
示例代碼1
html
<div></div>
css
width: 200px;
height: 120px;
background: linear-gradient(#fb3 50%,#58a 0);
結(jié)果
漸變色背景
解釋一下參數(shù)：
'#fb3顏色起始0~50% -> #58a顏色從50%至結(jié)束
2.background-size：規(guī)定背景圖像的尺寸
css
width: 200px;
height: 120px;
margin: 0 auto;
background: linear-gradient(90deg,#fb3 50%,#58a 0);
background-size: 60px 100%;
結(jié)果
background-size設(shè)置背景圖大小
因?yàn)闆]有設(shè)置repeat所以背景圖片會(huì)以60px會(huì)重復(fù)顯示
linear-gradient設(shè)置為90deg 色條順時(shí)針旋轉(zhuǎn)90度
3.傾斜的條紋背景
推薦寫法：
css
width: 200px;
height: 120px;
background: repeating-linear-gradient(60deg,#fb3,#fb3 30px,#58a 0,#58a 60px);
效果：
角度可以任意設(shè)置的傾斜條紋背景
更加易于維護(hù)的代碼：
css
width: 200px;
height: 120px;
background: yellowgreen;
background-image: repeating-linear-gradient(30deg,hsla(0,0%,100%,.4),hsla(0,0%,100%,.4) 15px,transparent 0,transparent 30px);
這樣設(shè)置 顏色就可以隨意更改了（僅限于此種樣式）
效果圖：
類似斑馬紋的條紋背景
思考：更加復(fù)雜的CSS背景牙咏？我會(huì)在下一小節(jié)介紹一下
