知识储备
1.上一小节的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重复的条纹
这些不是很复杂的规律一眼就能看出来，我们需要更加随机的效果，用于制造某些纹理，例如木纹
思考：作者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
像极了的随机背景图
