1、水平和垂直条纹
使用背景渐变效果可以实现各种各样的条纹背景。
当渐变色中的多个色标具有相同的位置时，它们之间就不会出现渐变效果，而是直接从一种颜色突变成另一种颜色。
background: linear-gradient(#fb3 50%,#58a 50%);
再利用background-size控制渐变的大小。
background: linear-gradient(#fb3 50%,#58a 50%);
background-size: 100% 40px;
background-repeat: no-repeat;
去掉background-repeat属性，让背景进行重复，就得到了条纹背景。
background: linear-gradient(#fb3 50%,#58a 50%);
background-size: 100% 40px;
垂直的条纹只要加上渐变的方向，交换一下background-size中x方向与y方向的值即可。
background: linear-gradient(to right,#fb3 50%,#58a 50%); // to right 也可换成 90deg
background-size: 40px 100%;
更加简化的写法，之后的色标颜色位置数值如果比之前的色标位置数值要小，那么之后的色标位置数值会被设置为之前色标的位置数值的最大值。
利用这一特性，将之后的色标位置属性改为0，这样修改的时候就只需要修改之前色标的位置数值了。
background: linear-gradient(90deg,#fb3 50%,#58a 0); // 效果与上图相同，改变50%这个值就可以改变条纹中两个颜色所占的比例。
background-size: 40px 100%;
2、斜向条纹
要得到斜向条纹，直接改变角度是不行的
background: linear-gradient(45deg,#fb3 50%,#58a 0); // 直接将90deg改为45deg，然后改变切片大小。会得到下图，得不到斜向条纹
background-size: 40px 40px;
需要重新思考背景重复的模块，水平和垂直的条纹中重复的是两条颜色条组成的条纹，45度斜向的条纹中，重复的是下面这个模块。
background: linear-gradient(45deg,#fb3 25%,#58a 0,#58a 50%,#fb3 0,#fb3 75%,#58a 0);
background-size: 56px 56px;
background-repeat: no-repeat;
去掉background-repeat;no-repeat属性之后就可以得到45度的斜向条纹。
background-size属性的值从40变成了56，之所以变大了，是因为条纹倾斜后，条纹的宽度变成了对角线的宽度，而不是原来的水平宽度，为了保证条纹宽度不会发生变化，就要改变背景大小的值，让对角线的长度变为之前的40，45度倾斜形成的是一个等腰直角三角形，用勾股定理可以求到background-size的大小约为56。
3、更好的斜向条纹。
当倾斜的角度不是45度并且不一定时，背景重复的模块就不是之前的了。此时可以使用循环渐变属性。
background: repeating-linear-gradient(60deg,#fb3,#fb3 20px,#58a 0,#58a 40px,#fb3 0,#fb3 60px,#58a 0,#58a 80px);
使用和这个属性就没有必要计算background-size的值了，因为条纹的宽度已经写入了每个颜色之间，改变60deg这个值就可以得到任何角度的倾斜条纹。
4、灵活的同色系条纹
当我们的渐变条纹的颜色为同一色系，只是在颜色的深浅上有差别（例如深蓝-浅蓝的渐变条纹）时。可以将最深的颜色当做背景色，然后再背景色上面使用白色的透明来实现渐变色，这样就可以得到同一色系的渐变条纹。
background: #58a;
background-image: repeating-linear-gradient(45deg,rgba(255,255,255,.1),rgba(255,255,255,.1) 20px,transparent 0,transparent 40px);
这样只要改变#58a这个值，就可以生成另外一个色系的条纹背景。
网友评论