css3 box-shadow
语法：
box-shadow：<length> <length> <length> <length> || <color>
相关属性：text-shadow
取值：
- <length> <length> <length>? <length>? || <color>：
- 阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色
说明：
设置块阴影
| 引擎类型 | Gecko | Webkit | Presto |
|---|---|---|---|
| Box-shadow | -moz-box-shadow | -webkit-border-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 |
-moz-box-shadow:0px 0px 15px #4C0100;
-webkit-box-shadow:0px 0px 15px #4C0100;
box-shadow:0px 0px 15px #4C0100;
摘抄两则知识点，以备忘记：
1. CSS3盒阴影效果不支持图片中空透明背景边缘的阴影效果
见如下测试代码：
img{-moz-box-shadow:2px 2px 4px #333333; -webkit-box-shadow:2px 2px 4px #333333; box-shadow:2px 2px 4px #333333; background:-moz-linear-gradient(top, white,
#beceeb); background:-webkit-gradient(linear,0 0, 0 bottom, from(white), to(#beceeb));}
<img src="../image/zxx_cavity.png" />
结果中空的“张鑫旭”三个字的边缘却没有阴影，只有图片的边缘有。您可以狠狠地点击这里查看demo：http://www.zhangxinxu.com/study/201004/png-cavity-box-shadow-test.html
2.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;
能够实现下图所示的按钮效果：
