爱华网和之前所讲过的文本阴影类似，box-shadow也是添加阴影效果的，但是他是用于给元素层添加阴影效果的，比如div、图片等等。今天我们就来认识一下这个新属性吧。
CSS3新增样式大解析：[3]boxShadow图层阴影――工具/原料编辑器电脑CSS3新增样式大解析：[3]boxShadow图层阴影――方法/步骤
CSS3新增样式大解析：[3]boxShadow图层阴影 1、
前面说到text-shadow和box-shadow的使用类似，都是添加阴影效果的，只不过一个转针对文字，一个针对文字外的大多数元素。现在我们就来料接一下吧！
同样，代码及效果如下：
CSS3新增样式大解析：[3]boxShadow图层阴影 2、
box-shadow取值可以有六个。
1、取四个值。
box-shadow：1px 1px 10px #00f;
这里的用法和text-shadow一模一样，一次是水平偏移 垂直便宜 阴影大小和阴影颜色。效果如图
CSS3新增样式大解析：[3]boxShadow图层阴影_boxshadow
CSS3新增样式大解析：[3]boxShadow图层阴影 3、
2、多层阴影。
CSS3新增样式大解析：[3]boxShadow图层阴影 4、
3、取值为5个的第一种情况（第二种情况在最后面讲）：
box-shadow：inset 1px 1px 10px #00f；
可以发现代码当中多了一个inset的值，这个值表示的意思是阴影的投射方向：向内还是向外偏移。
为了方便观察，我把背景颜色设置为浅灰，从图片可以看出，阴影在盒子内部了。
CSS3新增样式大解析：[3]boxShadow图层阴影_boxshadow
![css3 shadow 底部阴影 CSS3新增样式大解析 [3]boxShadow图层阴影](http://img.aihuau.com/images/b/06320603/3218030606320483832077.jpg)
CSS3新增样式大解析：[3]boxShadow图层阴影 5、
4、取值6个。
观察图片中的代码，可以知道我在颜色值的前面加了一个10px单位，然后在预览效果，发现同上面的取值为5个的情况相比，阴影的颜色要浓重了。没错，这个值就是用来控制阴阳的扩展的（加重阴影效果）。
CSS3新增样式大解析：[3]boxShadow图层阴影_boxshadow
CSS3新增样式大解析：[3]boxShadow图层阴影 6、
5、取值为5个的第二种情况。
其实上面已经提到了，五个情况的第二种就是取值为四个时再加上上一个步骤中增加的控制阴阳扩展的一个单位值。
box-shadow：1px 1px 10px 10px #00f
效果看图
CSS3新增样式大解析：[3]boxShadow图层阴影 7、
最后我们来看一个取负值的情况：
box-shadow的所有值当中有三个值可以取负值，用完整的代码来表示：
box-shadow：inset -1px -1px 10px -10px #00f
可以知道取负值的有，水平和垂直的偏移以及阴影的扩展值。
对于阴影的扩展值 为正则扩大阴影浓度和范围，为负则相反。
CSS3新增样式大解析：[3]boxShadow图层阴影_boxshadow
CSS3新增样式大解析：[3]boxShadow图层阴影 8、
说明：兼容性IE9、 Firefox 3.5 、chrome 2.0.x、oprea 10.6、 safari 4。
以上版本为个浏览器所能支持的最低版本，更高版本的均支持。
