-
以下代码：
CSS代码将内容复制到剪贴板。
背景：线性梯度（# FB 20%，# 58a 80%）
上面的代码显示整个图片20%的上部和下部，20%是相应的纯净的颜色，只有中间的部分是渐变颜色。如果中间部分逐渐减少，当在七点上下两到0种颜色和终点的中间部分是一样的，没有梯度为双色条纹：
CSS代码将内容复制到剪贴板。
背景：线性梯度（# FB 50%，# 58a 50%）；
下一步，可以设置背景尺寸，使背景高度变小，背景重复，使条纹出现。
CSS代码将内容复制到剪贴板。
背景：线性梯度（# FB 50%，# 58a 50%）；
背景尺寸：100% 30px；
我们不能设置第二个颜色的起始位置，设置为0，然后浏览器默认为下一个颜色开始：
CSS代码将内容复制到剪贴板。
背景：线性梯度（# FB 30%，# 58a 0）；
背景尺寸：100% 30px；
这将创建一个黄色的条纹背景，30%蓝色和70%。
还可以设置多种颜色，底部设置三种颜色。
CSS代码将内容复制到剪贴板。
背景：线性梯度（# FB 33.3%，# 58a 0，# 58a 66.6%，是0）；
背景尺寸：100% 45px；
二、垂直条纹
只需要在线性渐变方法中添加一个前缀，还需要注意背景长度和宽度的设置。
CSS代码将内容复制到剪贴板。
背景：线性梯度（要放，# FB 50%，# 58a 0）；
背景：30px大小100%；
三，斜条纹
斜条纹可以通过修改背景值的大小和增加线性梯度的角度来实现。
背景：线性梯度（45度，# FB 50%，# 58a； / / 0）得到背景梯度倾斜
背景尺寸：30px 30px； / /每一固定宽度和高度的一小部分
但结果是只有一小部分削减，而不是我们需要绘制斜线四个div组和线性梯度添加颜色分解全部倾斜。
CSS代码将内容复制到剪贴板。
背景：线性梯度（45度，# FB 25%，# 58a 0，# 58a50 %，# FB 0，# FB 75%，# 58a 0）；
背景尺寸：30px 30px；
四。使用重复线性梯度
这是更有效地使用重复线性梯度法绘制反斜杠。使用这种方法时，颜色变化的设置将自动重复直到整个div的传播。示例代码如下：
CSS代码将内容复制到剪贴板。
背景：重复线性梯度（45度，# FB，# 58a 30px）；
这样，可以任意改变角度，不必调整上、中方法。
背景：重复线性梯度（60度，# FB，# fb315px，# 58a 0，# 58a 30px）；
（这种方法实际上相当于将控件的大小与渐变的控制相结合）。
五、关于色彩的设置
有时我们想要条纹背景颜色相似的颜色，但颜色的#如果手动设置是不容易的，很难找到选择什么样的颜色，可以使用以下方法：
CSS代码将内容复制到剪贴板。
背景：# 58a；
背景图像：重复线性梯度（30deg，
低合金高强度（0 %，100%，1），
低合金高强度（0 %，100%，1）15px，
透明0、透明30px）；
这种方法的原理是在背景中指定最深的颜色，而其他类似的颜色则用透明度调节。
六。一个完整的例子
这里效果图和下面的样式一起放在一起：
CSS代码将内容复制到剪贴板。
{。条纹
身高：250px；
宽度：375px；
浮点数：左；
保证金：10px；
WebKit的背景尺寸：50px 50px；
-moz背景尺寸：50px 50px；
背景尺寸：50px 50px； / *控制条的大小。
-moz框1px 1px 8px灰色阴影；
WebKit的影子：1px 1px 8px灰盒；
盒子的影子：1px 1px 8px灰色；
}
CSS代码将内容复制到剪贴板。
{。水平
背景颜色：# 0ae；
背景图像：-webkit-gradient（线性，00, 0 100%，颜色停止（。5、RGBA（255, 255, 255，2），（5）颜色停止。，透明），以（透明））；
背景图像：-moz线性梯度（RGBA（255, 255, 255，50%，50%，2）透明，透明）；
背景图像：- o-linear-gradient（RGBA（255, 255, 255，50%，50%，2）透明，透明）；
背景图像：线性梯度（RGBA（255, 255, 255，50%，50%，2）透明，透明）；
}
CSS代码将内容复制到剪贴板。
{。垂直
背景颜色：# F90；
背景图像：-webkit-gradient（线性，00, 100～0的颜色停止（。5、RGBA（255, 255, 255，2），（5）颜色停止。，透明），以（透明））；
背景图像：-moz线性梯度（0度，RGBA（255, 255, 255，50%，50%，2）透明，透明）；
背景图像：- o-linear-gradient（0度，RGBA（255, 255, 255，50%，50%，2）透明，透明）；
背景图像：线性梯度（0度，RGBA（255, 255, 255，50%，50%，2）透明，透明）；
}
CSS代码将内容复制到剪贴板。
{。野餐
背景颜色：白色；
背景图像：-webkit-gradient（线性，00, 0 100%，颜色停止（。5、透明色），停止（。5、RGBA（200, 0, 0，5）），以（RGBA（200, 0, 0，））），
-webkit-gradient（线性，00, 100～0的颜色停止（。5、透明色），停止（。5、RGBA（200, 0, 0，5）），以（RGBA（200, 0, 0，5））））；
背景图像：-moz线性梯度（透明50%、RGBA（200, 0, 0。5）50%，RGBA（200, 0, 0，5）），
-moz线性梯度（0度、透明50%、RGBA（200, 0, 0。5）50%，RGBA（200, 0, 0，5））；
背景图像：- o-linear-gradient（透明50%、RGBA（200, 0, 0。5）50%，RGBA（200, 0, 0，5）），
- o-linear-gradient（0度、透明50%、RGBA（200, 0, 0。5）50%，RGBA（200, 0, 0，5））；
背景图像：线性梯度（透明50%、RGBA（200, 0, 0。5）50%，RGBA（200, 0, 0，5）），
线性梯度（0度、透明50%、RGBA（200, 0, 0。5）50%，RGBA（200, 0, 0，5））；
}
CSS代码将内容复制到剪贴板。
{。野餐
背景颜色：白色；
背景图像：-webkit-gradient（线性，00, 0 100%，颜色停止（。5、透明色），停止（。5、RGBA（200, 0, 0，5）），以（RGBA（200, 0, 0，））），
-webkit-gradient（线性，00, 100～0的颜色停止（。5、透明色），停止（。5、RGBA（200, 0, 0，5）），以（RGBA（200, 0, 0，5））））；
背景图像：-moz线性梯度（透明50%、RGBA（200, 0, 0。5）50%，RGBA（200, 0, 0，5）），
-moz线性梯度（0度、透明50%、RGBA（200, 0, 0。5）50%，RGBA（200, 0, 0，5））；
背景图像：- o-linear-gradient（透明50%、RGBA（200, 0, 0。5）50%，RGBA（200, 0, 0，5）），
- o-linear-gradient（0度、透明50%、RGBA（200, 0, 0。5）50%，RGBA（200, 0, 0，5））；
背景图像：线性梯度（透明50%、RGBA（200, 0, 0。5）50%，RGBA（200, 0, 0，5）），
线性梯度（0度、透明50%、RGBA（200, 0, 0。5）50%，RGBA（200, 0, 0，5））；
}
CSS代码将内容复制到剪贴板。
{。angled-135
背景颜色：# C16；
背景图像：-webkit-gradient（线性，00, 100 % 100%，
色站（。25、RGBA（255, 255, 255，2）），（25，透明的颜色停止。），
色站（。5、透明色），停止（。5、RGBA（255, 255, 255，2）），
色站（。75、RGBA（255, 255, 255，2）），（75，透明的颜色停止。），
（透明）；
背景图像：-moz线性梯度（45度，RGBA（255, 255, 255，25%，25%，2）透明，
透明50%、RGBA（255, 255, 255。2）50%，RGBA（255, 255, 255，2）75%，
透明75%，透明）；
背景图像：- o-linear-gradient（45度，RGBA（255, 255, 255，25%，25%，2）透明，
透明50%、RGBA（255, 255, 255。2）50%，RGBA（255, 255, 255，2）75%，
透明75%，透明）；
背景图像：线性梯度（45度，RGBA（255, 255, 255，25%，25%，2）透明，
透明50%、RGBA（255, 255, 255。2）50%，RGBA（255, 255, 255，2）75%，
透明75%，透明）；
}
CSS代码将内容复制到剪贴板。
{。花纹
背景图像：-webkit-gradient（线性，00, 100～100%的颜色停止（25，555，#）颜色停止（。25、透明）、来（透明）），
-webkit-gradient（线性，0, 100 %，100% 0，色站（25，555，#）颜色停止（。25、透明）、来（透明）），
-webkit-gradient（线性，00, 100～100%的颜色停止（。75、透明色），停止（。75，# 555）），
-webkit-gradient（线性，0, 100 %，100% 0，颜色停止（。75、透明色），停止（。75，# 555））；
背景图像：-moz线性梯度（45度，# 555 25%、透明25%、透明），
-moz线性梯度（45度，# 555 25%、透明25%、透明），
-moz线性梯度（45度，#透明75%，555 75%），
-moz线性梯度（45度，透明75%，# 555 75%）；
背景图像：- o-linear-gradient（45度，# 555 25%、透明25%、透明），
- o-linear-gradient（45度，# 555 25%、透明25%、透明），
- o-linear-gradient（45度，#透明75%，555 75%），
- o-linear-gradient（45度，透明75%，# 555 75%）；
背景图像：线性梯度（45度，# 555 25%、透明25%、透明），
线性梯度（45度，# 555 25%、透明25%、透明），
线性梯度（45度，#透明75%，555 75%），
线性梯度（45度，透明75%，# 555 75%）；
}
HTML代码：
xml代码将内容复制到剪贴板。