html⽤css画出斑马线,CSS3实现斑马线、棋盘、格⼦复杂背
景
我们知道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;好看的css代码
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的斑马线效果。
注意：IE9- 看不到效果。
在低版本IE中，请使⽤背景图⽚实现功能。
在IE9下可以使⽤filter滤镜实现渐变部分。
棋盘背景html>
CSS 棋盘背景
body {
background-image: linear-gradient(45deg, #E1DEB0 25%, transparent 25%, transparent 75%, #E1DEB0 75%, #E1DEB0),
linear-gradient(45deg, #E1DEB0 26%, transparent 26%, transparent 74%, #E1DEB0 74%, #E1DEB0);
background-image: -webkit-linear-
gradient(45deg, #E1DEB0 25%, transparent 25%, transparent 75%, #E1DEB0 75%, #E1DEB0),
-webkit-linear-gradient(45deg, #E1DEB0 26%, transparent 26%, transparent 74%, #E1DEB0 74%, #E1DEB0);
background-image: -moz-linear-
gradient(45deg, #E1DEB0 24%, transparent 24%, transparent 76%, #E1DEB0 76%, #E1DEB0),
-moz-linear-gradient(45deg, #E1DEB0 26%, transparent 26%, transparent 74%, #E1DEB0 74%, #E1DEB0);
background-image: -o-linear-gradient(45deg, #E1DEB0 25%, transparent 25%, transparent 75%, #E1DEB0 75%, #E1DEB0), -o-linear-gradient(45deg, #E1DEB0 25%, transparent 25%, transparent 75%, #E1DEB0 75%, #E1DEB0);
background-size: 100px 100px;
background-position: 0 0, 50px 50px;
}
注意修复当背景颜⾊不是⿊⽩相间时的在IE、Firefox、Safari下的bug
格⼦背景(不均匀的棋盘背景)html>
⼀种CSS格⼦背景
*{margin:0;padding:0;}
body{
background-image:-webkit-linear-gradient(0deg,#E1DEB0 50%,transparent 50%,transparent),
-webkit-linear-gradient(90deg,#E1DEB0 50%,transparent 50%,transparent);
background-image:-moz-linear-gradient(0deg,#E1DEB0 50%,transparent 50%,transparent),
-moz-linear-gradient(90deg,#E1DEB0 50%,transparent 50%,transparent);
background-image:-o-linear-gradient(0deg,#E1DEB0 50%,transparent 50%,transparent),
-o-linear-gradient(90deg,#E1DEB0 50%,transparent 50%,transparent);
background-image:linear-gradient(0deg,#E1DEB0 50%,transparent 50%,transparent),
linear-gradient(90deg,#E1DEB0 50%,transparent 50%,transparent);
background-size:100px 100px;
}
这是CSS格⼦背景。
从以上实例中我们可以看出，主要⽤到了CSS3中的background-image，background-size，background-position等属性。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。