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酷条纹背景,希望对你有帮助,如果您有任何问题,请给我留言,萧边会及时回复你。谢谢你的支持网站。