CSS3酷条纹背景

1。不等背景条纹：
续{。
宽度：500px；
身高：200px；
背景：线性梯度（# 78c9db 70%，# 0acf00 0%）；
背景尺寸：100% 20px；
}
如果要设置渐变的宽度，则只需要开始和结束值作为补充。

如果需要削减非渐变渐变的宽度，则开始和结束可以设置为50%的值。

如果你想要垂直条纹，你只需要调整背景尺寸的x和y值。

2。瓷砖背景
续{。
宽度：500px；
身高：200px；
背景：线性梯度（45度，# 78c9db 50%，# 0acf00 50%）；
背景尺寸：30px 30px；
}
三.草地背景
续{。
宽度：500px；
身高：200px；
背景：线性梯度（45度，# 0acf00 50%，# 78c9db 50%）；
背景：30px大小100%；
}
4。斜条纹背景
续{。
宽度：500px；
身高：200px；
背景：线性梯度（45度，# 0acf00 25%，# 78c9db 0，# 78c9db 50%，# 0acf00 0，# 0acf00 75%，# 78c9db 0）；
/ *背景：重复线性梯度（45度，# 0acf00，# 0acf00，15px，# 78c9db 0，# 78c9db 30px）； / /相同的效果
背景尺寸：30px 30px；
}
5。单色条纹背景（使用透明和透明）
续{。
宽度：500px；
身高：200px；
背景：# FFF重复线性梯度（30deg，RGBA（0,0,0，。5），RGBA（0,0,0，。5）15px、透明0、透明）；
}
6。背景格
续{。
宽度：500px；
身高：200px；
背景：# FFF；
背景：线性梯度（90度，RGBA（100,0,0，。5）50%，透明0），线性梯度（RGBA（100,0,0，。5）50%，透明0）；
背景尺寸：30px 30px；
}
7。波点的背景
续{。
保证金：50px；
宽度：500px；
身高：200px；
背景：# a95f44；
背景图像：径向渐变（# FFF 30%，透明的径向渐变（0），# FFF 30%，透明0）；
背景尺寸：20px 20px；
背景位置：0 0,10px 10px； / /背景尺寸大小必须是1 / 2
}
8。棋盘背景
续{。
宽度：500px；
身高：200px；
背景：# FFF；
背景图像：线性梯度（45度，# a95f44 26%、透明0、透明75%、# a95f44 0），
线性梯度（45度，# a95f44 26%、透明0、透明75%、# a95f44 0）；
背景尺寸：30px 30px；
背景位置：0 0,15px 15px；
}
总结

以上是萧边介绍的CSS3酷条纹背景，希望对你有帮助，如果您有任何问题，请给我留言，萧边会及时回复你。谢谢你的支持网站。