05.条纹背景

1.渐变平分盒子

  .box{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background: linear-gradient(#fb3,#58a);
        }

                             ![image.png](https://cdn.nlark.com/yuque/0/2021/png/22615031/1631840058189-db3117fd-35a3-4b3a-97ad-789ef08d2d75.png#clientId=u4ce1aabb-7959-4&from=paste&height=145&id=u5cf0092c&margin=%5Bobject%20Object%5D&name=image.png&originHeight=289&originWidth=288&originalType=binary&ratio=1&size=5513&status=done&style=none&taskId=u665c38f9-01ab-49be-9f0a-f1f47ff84bc&width=144)

2.有三种颜色的条纹图案

                              ![image.png](https://cdn.nlark.com/yuque/0/2021/png/22615031/1631840271107-0d53dc37-e82a-4880-b68e-91119e7438cf.png#clientId=u4ce1aabb-7959-4&from=paste&height=143&id=u2a998340&margin=%5Bobject%20Object%5D&name=image.png&originHeight=286&originWidth=285&originalType=binary&ratio=1&size=4651&status=done&style=none&taskId=u0a4ec178-dc66-4c76-af8d-4316865b703&width=142.5)<br />如果我们第二个的色标值为0，那他的位置总是被浏览器调整为前一个色标的位置

.box{         
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background: linear-gradient(#fb3 33.33%,#58a 0,#58a 66.6%,yellowgreen 0);
            background-size: 100% 45px;
        }

3.斜向条纹

 .box{         
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background: linear-gradient(45deg, #fb3 25%,#58a 0,#58a 50%,#fb3 0, #fb3 75% , #58a 0);
            background-size: 30px 30px;
        }

                                        ![image.png](https://cdn.nlark.com/yuque/0/2021/png/22615031/1631840324171-b57fbb12-6dd3-4b9d-a618-48062c913492.png#clientId=u4ce1aabb-7959-4&from=paste&height=143&id=ub0769f6d&margin=%5Bobject%20Object%5D&name=image.png&originHeight=286&originWidth=296&originalType=binary&ratio=1&size=24622&status=done&style=none&taskId=u6f6374d2-9318-47b5-be2b-96f61841bd3&width=148)<br /> 4.更简洁 规范的斜向条纹(repeating-linear-gradient 色标是无限循环重复的，直到填满整个背景) 

 .box{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background: repeating-linear-gradient(45deg,
 #fb3, #fb3 15px, #58a 0, #58a 30px);
        }

                                       ![image.png](https://cdn.nlark.com/yuque/0/2021/png/22615031/1631840620220-6107867f-4227-43fa-b4e0-e78887e55333.png#clientId=u4ce1aabb-7959-4&from=paste&height=147&id=ud625e248&margin=%5Bobject%20Object%5D&name=image.png&originHeight=294&originWidth=298&originalType=binary&ratio=1&size=12548&status=done&style=none&taskId=u6c85a0a2-e79a-48d2-8db4-539d0ed806f&width=149)