效果演示：
box-shadow向框添加一个或多个阴影。IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。
语法：
CSS Code复制内容到剪贴板
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow,v-shadow必须。水平，垂直阴影的位置。允许赋值。blur可选，模糊距离。spread可选，阴影的尺寸。color可选，阴影的颜色。inset可选，将外部阴影（outset）改为内部阴影。
来看几个简单的范例：
XML/HTML Code复制内容到剪贴板
<body>
<div class="box">
<span class="caption">A</span>
</div>
<div class="box">
<span class="caption">B</span>
</div>
<div class="box">
<span class="caption">C</span>
</div>
<div class="box">
<span class="caption">D</span>
</div>
<div class="box">
<span class="caption">E</span>
</div>
<div class="box">
<span class="caption">F</span>
</div>
<div class="box">
<span class="caption">G</span>
</div>
<div class="box">
<span class="caption">H</span>
</div>
</body>
先将它们简单的设定一下样式：
CSS Code复制内容到剪贴板
.box {
background-color: #fff;
border: 3px solid #ccc;
float: left;
margin: 20px 40px 0 0;
height: 65px;
width: 160px;
text-align: center;
}
.caption {
font-size: 20px;
position: relative;
