持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第11天。
知识点：CSS线性渐变，background-size
背景
在我们编写网页代码的时候，偶尔也会遇到条纹的背景，通常我们的做法是做一张图片进行重复，或者使用 svg 图片，但是编写都是有些繁琐的。如果 CSS 原生可以支持制作条纹背景那该有多好，其实 CSS 早已经支持了这种效果，今天我们就来试一下。
效果实现
CSS 线性渐变 linear-gradient 其实是支持位置定义的，只要通过改变渐变位置削弱渐变的过渡效果，同时配合 background-size 将背景平铺即可实现条纹背景。
<div class="bg"></div>
<style>
.bg{
width: 200px;
height: 200px;
background: linear-gradient(#fb3 50%, #58a 50%); /*重点代码*/
background-size: 100% 30px;/*重点代码*/
}
</style>
实现效果图：
《CSS图像（第三版）》说：“如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值。”
也就是说，如果我们把第二个色标的位置设为0，那么它的位置就会是第一个色标的位置值。我们来看一下实现的效果就明白了。
代码：
<div class="bg"></div>
<style>
.bg{
width: 200px;
height: 200px;
background: linear-gradient(#fb3 30%，#58a 0); /*重点代码*/
background-size: 100% 30px;/*重点代码*/
}
</style>
实现效果：
如果想创建超过2种颜色的条纹也可以：
代码：
<div class="bg"></div>
<style>
.bg{
width: 200px;
height: 200px;
background: linear-gradient(#fb3 30%, #58a 0, #58a 66.6%, yellowgreen 0); /*重点代码*/
background-size: 100% 30px;/*重点代码*/
}
</style>
实现效果：
其他条纹背景
垂直条纹
代码：
<div class="bg"></div>
<style>
.bg{
width: 200px;
height: 200px;
background: linear-gradient(to right,#fb3 50%, #58a 0); /*重点代码:to right这个参数是重点，水平的时候默认为 to down，所以可以不用写*/
background-size: 30px 100%;/*重点代码：位置颠倒一下*/
}
</style>
实现效果：
斜向条纹
这个要复杂一些，要借助 repeating-linear-gradient 来实现，但是不再需要 background-size 加持了。 代码：
<div class="bg"></div>
<style>
.bg{
width: 200px;
height: 200px;
background: repeating-linear-gradient(45deg,#fb3, #fb3 15px, #58a 0, #58a 30px);
}
</style>
实现效果：
还有一种通过定义两个位置信息定义的方法：
<div class="bg"></div>
<style>
.bg{
width: 200px;
height: 200px;
background: repeating-linear-gradient(60deg, #fb3 0 15px, #58a 0 30px);
}
</style>
效果同上。
通过比较可知：第二种更加方便易用。
同色系斜向条纹
还有一种是同色系变化的斜向条纹，通过改变明度来实现：
<div class="bg"></div>
<style>
.bg{
width: 200px;
height: 200px;
ckground: #58a;
ckground-image: repeating-linear-gradient(30deg, hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1)15px, transparent 0, transparent 30px);
}
</style>
实现效果：
