如何用css3制作纹理背景
看到题目大家也许会想,这是什么意思,一直想系统一下自己的css3的知识,才发现自己对css3的掌握程度简直不敢直视,很多地方都差了好多,暂且一点点来学吧!
记得有一天在微博上面,看到w3cplus的大漠除了个题目,用css3实现上下两个颜色的锯齿状背景图,完全不敢想像,不用图片要如何实现,可是真的就可以用代码敲出来。随后看了看文章附带的连接,真可谓是大开眼界,膜拜大神啊!
先给大家看几张图
对,你没看错,这些好看的纹理背景都是用css3实现的,没有图片背景哦!!!
那现在就来看看究竟是如何实现的。
一、简单的布局:
html代码很简单,只要一个容器即可
来看一下css代码
.stripes {
height: 250px;
width: 375px;
float: left;
margin: 10px;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
background-size: 50px 50px;
-moz-box-shadow: 1px 1px