一、水平条纹效果：
<html><head><style type="text/css">div{font-size:100px;text-align:center;line-height:3;color:white;background: linear-gradient(#fb3 50%,#58a 50%);background-size:100% 100px;}</style></head><body><div>测试一下</div></body></html>
效果图：
二、垂直条纹效果：
<html><head><style type="text/css">div{font-size:100px;text-align:center;line-height:3;color:white;background: linear-gradient(to right,#fb3 50%,#58a 50%);background-size:100px 100% ;}</style></head><body><div>测试一下</div></body></html>
效果图：
三、斜向条纹背景：
尝试改写：
<html><head><style type="text/css">div{font-size:100px;text-align:center;line-height:3;color:white;background: linear-gradient(45deg,#fb3 50%,#58a 50%);background-size:100px 100px ;}</style></head><body><div>测试一下</div></body></html>
但是实际却并没有出现想要的效果：
翻转是把平铺图案的基本单位全部翻转了，无法实现无缝拼接。水平或者垂直的时候，基本单位都是两条贴片，但斜向是四条贴片，对比如下图所示：
水平2贴片：
斜向4贴片：
修改后代码如下：
<html><head><style type="text/css">div{font-size:100px;text-align:center;line-height:3;color:white;background: linear-gradient(45deg,#fb3 25%,#58a 25%,#58a 50%,#fb3 50%,#fb3 75%,#58a 75%);background-size:100px 100px ;}</style></head><body><div>测试一下</div></body></html>
效果如图所示：
但是实际条纹宽度由于翻转，值为宽度除以√2（45度，其余角度额外算），要想得到最接近的样子，相对应的size乘这个数值即可（只能是近似，css不支持根号，一般取整或者保留一位小数）。
或者使用repeating-linear-gradient（不用写background-size了，可实现任意角度，但是条纹宽度仍然会变细 ）也可以取到同样的效果，更推荐这一种方法，简单很多，也比较好理解）。
<html><head><style type="text/css">div{font-size:100px;text-align:center;line-height:3;color:white;background: repeating-linear-gradient(45deg,#fb3,#fb3 50px,#58a 50px,#58a 100px);}</style></head><body><div>测试一下</div></body></html>
总之，不论角度是多少，创建双色条纹时都需要使用四个色标。
如果觉得《css：linear-gradient实现水平条纹背景 垂直条纹背景 斜向条纹背景》对你有帮助，请点赞、收藏，并留下你的观点哦！
