1、新建一个HTML文档，并定义一个包含图片的<div>。
2、保存文件以后，预览文档的原始效果。
3、定义div的CSS属性，示例： <style>.shadow{ /*需要先定义元素的宽高*/width: 275px
height: 95px}</style>。
4、阴影部分的box-shadow详细设置。
5、设置之后，保存文件，预览查看BOX-SHADOW的效果。
可以利用before和after伪类产生两个旋转一定角度的阴影来实现，比如：
<style>section {
POSITION:relative
margin:36px 50px
width:640px
height:200px
background-color:#fff
border:10px solid #ff0
}
section:before {
position:absolute
z-index:-1
left:20px
bottom:10px
width:80%
height:20px
content:""
transform:skew(-18deg) rotate(-3deg)
-webkit-transform:skew(-18deg) rotate(-3deg)
-moz-transform:skew(-18deg) rotate(-3deg)
box-shadow:0 20px 20px #666
}
section:after {
position:absolute
z-index:-2
right:20px
bottom:10px
width:80%
height:20px
content:""
transform:skew(18deg) rotate(3deg)
-webkit-transform:skew(18deg) rotate(3deg)
-moz-transform:skew(18deg) rotate(3deg)
box-shadow:0 20px 20px #666
}
</style>
<section></section>
