知識儲備
1.上一小節(jié)的linear-gradient
小測試
1.最簡單的做法
html
<ul>
<li></li>
<li></li>
</ul>
css
li:nth-child(1){
background-image:
linear-gradient(90deg,
#fb3 15%,#655 0, #655 40%,
#ab4 0,#ab4 65%,hsl(20,40%,90%) 0);
background-size: 80px 100%;
}
結果：
按照80px重復的條紋
這些不是很復雜的規(guī)律一眼就能看出來键袱，我們需要更加隨機的效果，用于制造某些紋理轧坎，例如木紋
思考：作者lea在這里引入了一個概念 ，利用 質數的最小公倍數 來模擬一個隨機的效果
示例代碼：
css
li:nth-child(2){
background: hsl(20,40%,90%);
background-image:
linear-gradient(90deg,#fb3 10px ,transparent 0),
linear-gradient(90deg,#ab4 20px ,transparent 0),
linear-gradient(90deg,#655 20px ,transparent 0);
background-size: 81px 100%,61px 100%,41px 100%;}
結果：
最小公倍數= 81 x 61 x 41 = 202581px
像極了的隨機背景圖
