html背景纹理,如何用css3制作纹理背景

如何用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 8px gray;

-webkit-box-shadow: 1px 1px 8px gray;

box-shadow: 1px 1px 8px gray;

}

样式布局里除了基础布局，用到了两个css3的属性，box-shadow(盒阴影) 和 background-size