建议你还是使用图片来制作阴影效果，布局上可以使用table做外部框架，把阴影设置于外部，内部主要内容部分用背景色就行了，图片中半透明部分只需要切成png格式即可，切图效果如下：
用table布局比较方便，不容易出错，用纯div布局也是可以的，可以根据上图中几个切图布局嵌套，首先把左上角图片作为背景设置居左并设置padding-left:图片的宽度，然后在这个div内加一个div，这个div再设右上角图片居右并设置padding-right:图片的宽度，最后在这个div内再嵌套一个div设置上面的图片横向平铺，设置一下高度即可完成上部的阴影，中间和下方的阴影方法也差不多，我大概写一下div布局及代码好了，如下：
<div><div style=" background:url(左上角图片) left bottom no-repeat padding-left:15px">
<div style=" background:url(右上角图片) right bottom no-repeat padding-right:15px">
<div style=" background:url(上方图片) 0 bottom repeat-x height:18px"></div>
</div>
</div>
<div style=" background:url(左上角图片) left 0 repeat-y padding-left:15px">
<div style=" background:url(右上角图片) right 0 repeat-y padding-right:15px">
<div style=" background:white">内容</div>
</div>
</div>
<div style=" background:url(左下角图片) left top no-repeat padding-left:15px">
<div style=" background:url(右下角图片) right top no-repeat padding-right:15px">
<div style=" background:url(下方图片) 0 top repeat-x height:25px"></div>
</div>
</div>
</div>
注：IE6无法兼容png透明效果，我百度空间有解决该问题的文章，你可以去看看
时间有限，只能打这些字了，还得忙工作
box-shadow:none|shadow
它的值包括 6 个参数：阴影类型，X轴位移，Y轴位移，阴影大小，阴影扩展和阴影颜色。此 6 个参数可以有选择地省略。
浏览器兼容性
Webkit支持：-webkit-box-shadow
Mozilla支持：-moz-box-shadow
IE9支持：box-shadow
IE8及以前：不支持
实用实例
简单效果:
img{
height:300px
-moz-box-shadow:5px 5px
-webkit-box-shadow:5px 5px
box-shadow:5px 5px
}
虚阴影效果:
img{
height:300px
-moz-box-shadow:2px 2px 10px #06c
-webkit-box-shadow:2px 2px 10px #06c
box-shadow:2px 2px 10px #06c
}
渐变阴影效果:
img{
height:300px
-moz-box-shadow:0 0 10px #06c
-webkit-box-shadow:0 0 10px #06c
box-shadow:0 0 10px #06c
}
带光晕效果
img{
height:300px
-moz-box-shadow:0 0 10px 10px #06c
-webkit-box-shadow:0 0 10px 10px #06c
box-shadow:0 0 10px 10px #06c
}
内阴影效果
img{
height:300px
-moz-box-shadow:inset 5px 5px 10px #06c
-webkit-box-shadow: inset 5px 5px 10px #06c
box-shadow: inset 5px 5px 10px #06c
}
彩色阴影
img{
height:300px
-moz-box-shadow:0 0 10px red,
2px 2px 10px 10px yellow,
4px 4px 12px 12px green
-webkit-box-shadow:0 0 10px red,
2px 2px 10px 10px yellow,
4px 4px 12px 12px green
box-shadow:0 0 10px red,
2px 2px 10px 10px yellow,
4px 4px 12px 12px green
}
可以用CSS3的阴影属性。 不过要支持IE6的话，加载个 .htc 行为文件就好了。border: 1px solid #696padding: 60px 0text-align: centerwidth: 200px-webkit-box-shadow: #666 0px 0px 10px-moz-box-shadow: #666 0px 0px 10pxbox-shadow: #666 0px 0px 10pxbackground: #EEFF99behavior: url(/PIE.htc)。\x0d\x0a直接使用box-shadow:5px 5px 10px black inset属性设置样式样式就可以了。前两个值（5px 5px）是水平和垂直方向的偏移量，正值阴影就会向左向下偏移，负值反之；第三个值（10px）是设置模糊距离；black就是阴影的颜色啦；最后一个inset是在元素内部创建一个阴影，也就是内阴影了；删除掉inset就是设置外阴影了。\x0d\x0a这是使用纯CSS实现的效果，在DIV层的区域边框添加阴影效果，看上去非常形象，但是实现起来并不是太难，CSS代码比较简洁，值得我们学习。盒子阴影的CSS实现方法
