css3的box-shadow是给图层实现投影效果的一个属性。
语法：
box-shadow：<length> <length> <length> <length> || <color>
具体说明：
box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色
box-shadow:inset 5px 5px 4px 3px #f60
取值：
X轴偏移量（可取正负值）；
Y轴偏移量（可取正负值）；
阴影模糊半径（只能是正值）；
阴影扩展半径(可取正负值)；
投影方式:此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果设置其唯一值为inset，那么是内投影。
X轴偏移量：如果值为正值，则在对象的右边阴影，其值为负值时，在对象的左边阴影；
Y轴偏移量：如果值为正值，则在对象的底部阴影，其值为负值时，在对象的顶部阴影；
阴影模糊半径：此参数是可选的，只能为正值，如果值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
阴影扩展半径：此参数是可选的，其值可取正负值，如果值为正，则整个阴影都延展扩大，值为负值时，则阴影缩小；
阴影颜色：此参数也是可选的，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样和表现也是不一样的，所以我们最好要设置自己所需的颜色。甚至我认为可以当必选来设置。
兼容性
ie9+、chrome2.0.x+、firefox3.5+、opera10.5+、safari4+都支持css3的box-shadow属性，经过自己的测试，由于自己是最新的浏览器。发现在firefox、chrome中并不要加前缀，发现win版的safari5.1.7也无需加前缀。通常我们都知道，Mozilla内核的要加-moz，webkit内核的加-webkit。所以为了更好的兼容建议还是这样写
-moz-box-shadow:5px 5px 4px 3px #ddd;
-webkit-box-shadow:5px 5px 4px 3px #ddd;
box-shadow:5px 5px 4px 3px #ddd;
那么在IE9以下如何让对象有投影的效果，因为我们都知道IE9以下是不支持CSS3的box-shadow的，如果要处理这个兼容问题，那么我们就要用到ie的shadow阴影滤镜了。
filter:progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度值（数值）, Strength=阴影半径大小（数值）);
注意：该滤镜必须配合background属性一起使用，否则该滤镜会失效。
下面来看具体的例子：（说明：例子只写标准的box-shadow）
所有demo公用样式
.com{
width:200px;
height:80px;
}
1、例子一：
box-shadow:5px 0 4px 3px #ddd;
html：
<div class=”com demo”></div>
css:
.demo{
background:#f60;
box-shadow:5px 0 4px 3px #ddd;
}
效果：
通过上面的例子我们可以看出，当阴影模糊半径和阴影扩展半径不为0时，其他的三边其实也有阴影的。大家使用的时候要弄清楚。
2、例子二：给四边都加上不同阴影
box-shadow: -5px 0 #000, //左边阴影
0 -4px red, //顶部阴影
2px 0 blue; //右边阴影
0 3px green, //底部阴影
html：
<div class=”com demo1″></div>
css:
.demo1{
background:#ddd;
box-shadow:-5px 0 5px #000,
0 -4px 5px red,
2px 0 5px blue,
0 3px 5px green;
}
效果：
从上面的效果我们可以看出，我们为四边都设置不同的阴影了。从左-顶-右-底的顺序。
3、例子三：给四边加上相同的阴影效果,（box-shadow只设置阴影模糊半径和阴影颜色的情况）
box-shadow:0 0 10px red;
html：
<div class=”com demo2″></div>
css:
.demo2{
background:#ddd;
box-shadow:0 0 10px red;
}
效果：
通过上面我们可以看出只需给box-shadow设置阴影模糊半径和阴影颜色就能实现给四边加上相同的阴影效果了。
同理，只设置阴影扩展半径和阴影颜色的情况如下：
box-shadow:0 0 0 4px red;
css：
.demo3{
background:#ddd;
box-shadow:0 0 0 4px red;
}
效果：
不过这样的话看上去很像设置一个边框了，但和边框是有区别的。
4、Drop-shadow效果的实现
主要是利用box-shadow配合元素的两个伪元素:before和:after以及定位来实现的，下面看例子
html:
<div class=”com demo4″></div>
css：
.demo4{
width:300px;
height:150px;
background:#ddd;
position:relative;
}
.demo4:before,.demo4:after{
content:””;
width:140px;
height:30px;
position:absolute;
left:10px;
bottom:10px;
z-index:-10;
-moz-box-shadow:0 15px 10px rgba(121,121,121,0.5);
-webkit-box-shadow:0 15px 10px rgba(121,121,121,0.5);
box-shadow:0 15px 10px rgba(121,121,121,0.5);
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
transform: rotate(-4deg);
}
.demo4:after{
right:10px;
left:auto;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
transform: rotate(4deg);
}
效果：
