本文介绍了如何使用CSS3的线性渐变创建斑马线、棋盘格和不均匀的网格背景。通过调整背景图像、尺寸和位置，实现了在不同场景下的复杂背景效果。实例代码中详细展示了实现这些效果的具体语法，适用于现代浏览器，对于低版本IE则需采用其他方法。
我们知道CSS3能实现好看的渐变色背景，实际上它还可以实现更复杂的背景，比如条纹斑马线、棋盘、网格等，下面我们就来贴出代码，希望能为大家提供思路和帮助。
细线网格背景
.container{
background-image: linear-gradient(90deg, rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%),linear-gradient(rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%);
background-size: 10px 10px;
width: 600px;
height: 300px;
}
斑马线背景(条纹)html>
CSS 斑马线效果*{margin:0;padding:0;}
body{
background-image:-webkit-linear-gradient(0deg,#E1DEB0 50%,transparent 50%,transparent);
background-image:-moz-linear-gradient(0deg,#E1DEB0 50%,transparent 50%,transparent);
background-image:-o-linear-gradient(0deg,#E1DEB0 50%,transparent 50%,transparent);
background-image:linear-gradient(90deg,#E1DEB0 50%,transparent 50%,transparent);
background-size:10% 100%;
}
这是使用CSS3的斑马线效果。
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
