css线性渐变
语法：background: linear-gradient(direction, color-stop1, color-stop2, ...);
水平条纹：
body{
background: linear-gradient(#fb3 30%,#58a 0,#58a 66.6%,yellow 0);
background-size: 100% 45px;
}
默认重复平铺
垂直条纹：
body{
background: linear-gradient(to right,#fb3 50%,#58a 0);
background-size: 30px 100%;
}
垂直条纹
斜向条纹：
body{
background: linear-gradient(45deg,#fb3 50%,#58a 0);
background-size: 30px 30px;
}
首次尝试失败
以上，只是把每个“贴片”的内部渐变旋转了45°，而不是把整个重复的背景都旋转了。
body{
background: linear-gradient(45deg,#fb3 25%,#58a 0,#58a 50%,#fb3 0,#fb3 75%,#58a 0);
background-size: 30px 30px;
}
单个贴片中应包含4条条纹
但是，得到的条纹看起来比之前的水平或垂直条纹细一些，是因为现在的间距是旋转之前等腰直角三角形的直角边，事实上我们需要的是它的斜边，因此应该是直角边的√2倍，它不是整数只能为近似值42.426406871 px，略略略，其实写成42px就差不多了。
这样看上去就差不多了
更好的斜向条纹：
repeating-linear-gradient()
body{
background: repeating-linear-gradient(45deg,
#fb3 0,#fb3 25%,#58a 0,#58a 50%);
background-size: 42.43px 42.43px;
}
灵活的同色系条纹
可以把最深的颜色指定为背景色，同时把半透明白色的条纹叠加在背景色之上来得到浅色条纹
body{
background: #58a;
background-image: repeating-linear-gradient(30deg,
hsla(0,0%,100%,.1),
hsla(0,0%,100%,.1) 15px,
transparent 0,transparent 30px);
}
