原来这个属性的值和参数跟text-shadow是一个样的，就是都是水平偏移（可取正负值）、垂直偏移（同上）、阴影模糊值、阴影颜色。
当然使用text-shadow时是不需要区分浏览器的。另外我还发现网络有一个是可以在前面添加inset(内发光或者阴影）。类似于这样子写
box-shadow:inset 2px 2px 2px #FF0000;
颜色值还可以是这样子的rgba(0,0,0,5)
box-shadow：<length> <length> <length> <length> || <color>
相关属性：text-shadow
取值：
- <length> <length> <length>? <length>? || <color>：
- 阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色
说明：
设置块阴影
| 引擎类型 | Gecko | Webkit | Presto |
|---|---|---|---|
| box-shadow | -moz-box-shadow | -webkit-box-shadow | |
兼容性：
| 类型 |  Internet Explorer |
 Firefox |
 Chrome |
 Opera |
 Safari |
|---|---|---|---|---|---|
| 版本 | (×)IE6 | (×)Firefox 3.0.10 | (√)Chrome 2.0.x | (×)Opera 9.64 | (√)Safari 4 |
| (×)IE7 | (√)Firefox 3.5 | (√)Opera 10.6 | |||
| (×)IE8 | |||||
| (√)IE9 |
代码与实例
CSS代码：
.box_shadow{
width:180px;
padding:40px 20px;
background:white;
-webkit-box-shadow:4px 2px 6px #333333;
-moz-box-shadow:3px 2px 6px #333333;
}
HTML代码：
<div class="box_shadow">盒阴影效果，看看如何~~</div>
效果截图
拓展知识点（由各前端同仁提供）
CSS3盒阴影效果不仅支持盒外阴影，还支持内阴影，使用时增加一个inset属性即可。例如：box-shadow: inset 0 0 1px #fff;所表示的含义是没有偏移，1像素模糊的白色内阴影。box- shadow还支持多阴影，例如：box-shadow: inset 0 0 1px #fff, inset 4px 4px 20px rgba(255,255,255,0.33), inset -2px -2px 10px rgba(255,255,255,0.25);所表示的含义是，无偏移1像素模糊白色阴影重叠于左上角4像素偏移20像素模糊透明度0.33的白色内阴影再重叠于右下角偏移2像素，模糊10像素，透明度0.25的白色内阴影。box-shadow的投影功能很强大，配合其他一些CSS3属性，能够轻松实现很多精湛的UI效果，例如下面的样式： -webkit-border-radius: 40px; -webkit-box-shadow: 0 0 1px #fff, 0 0 3px #000, 0 0 3px #000; -moz-border-radius: 40px; -moz-box-shadow: 0 0 1px #fff, 0 0 3px #000, 0 0 3px #000, inset 0 1px #fff, inset 0 12px rgba(255,255,255,0.15), inset 0 4px 10px #cef, inset 0 22px 5px #0773b4, inset 0 -5px 10px #0df; height: 34px; width: 80px; border-radius: 40px; background: #034a76; box-shadow: 0 0 1px #fff, 0 0 3px #000, 0 0 3px #000, inset 0 1px #fff, inset 0 12px rgba(255,255,255,0.15), inset 0 4px 10px #cef, inset 0 22px 5px #0773b4, inset 0 -5px 10px #0df;能够实现下图所示的按钮效果：
发现在使用:after之后还有这样子的效果，来自网络
看下面一个例子：为下面这张图片添加阴影，让其有立体感：
<html>
<head>
<title></title>
<meta charset=”utf-8″ />
<style>
body {
width:500px;
margin:50px auto;
}
.box {
position:relative;
-webkit-box-shadow:1px 2px 4px rgba(0, 0, 0, 0.5);
-moz-box-shadow:1px 2px 4px rgba(0, 0, 0, 0.5);
box-shadow:1px 2px 4px rgba(0, 0, 0, 0.5);
padding:10px;
background:#fff;
}
.box img {
width:100%;
border:1px solid #8a4419;
border-style:inset;
}
.box:after {
content:”;
position:absolute;
z-index:-1;/* 阴影部分 */
-webkit-box-shadow:0 15px 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow:0 15px 20px rgba(0, 0, 0, 0.3);
box-shadow:0 15px 20px rgba(0, 0, 0, 0.3);
width:70%;
left:15%;
height:100px;
bottom:0;
}
</style>
</head>
<body>
<div class=”box”>
<img src=”allstar.jpg” title=”球星云集” />
</div>
</body>
</html>
运行效果如下（Chrome中）：
以前我吗需要在photoshop中把图片做成这样的效果，现在可以直接用CSS代码来实现了。
文章参考：
http://www.zhangxinxu.com/css3/css3-text-shadow.php
http://www.cnblogs.com/lianjun/archive/2011/03/14/1983465.html
