-webkit-border-radius: 8px
-moz-border-radius: 8px
border-radius: 8px
-webkit-box-shadow: #666 0px 0px 10px
-moz-box-shadow: #666 0px 0px 10px
box-shadow: #666 0px 0px 10pxbackground: #EEFF99behavior: url(/PIE.htc)
这是使用纯CSS实现的效果，在DIV层的区域边框添加阴影效果，看上去非常形象，但是实现起来并不是太难，CSS代码比较简洁，值得我们学习。
<title>盒子阴影的CSS实现方法</title>
<style>
.baseBlock{
width:220px
position:relative
}
.baseBlockIn{
padding:10px 15px
background:#a0b3d6
box-shadow:10px 10px 5px #444
-moz-box-shadow:10px 10px 5px #444
-webkit-box-shadow:10px 10px 5px #444
position:relative
z-index:1
}
.ieShadow{
_width:215px
_height:160px
filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=6)
-ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=6)"
background-color:#444\9
position:absolute
left:5px
top:5px
right:-5px
bottom:-5px
}
</style>
<div class="baseBlock">
<div class="baseBlockIn">
在网页中插入图片是再平常不过的事情了，但更多的时候为了美观的需要，要给图片加上阴影，图片数量较多的时候，工作量是非常大的。重复劳动而且没有工作效果。有没有办法用CSS给图片加阴影呢？CSS中有一个概念大家应该都不陌生，那就是相对定位position:relative。应该学会灵活的运用CSS所提供的属性。给图片加阴影就可以用position:relative相对定位的办法来实现。关于position属性可以参考这里。
看下面的css代码：
.waiwei {
position:relative
background:#eee
margin:0 auto
width:200px
}
.tupian {
background:#fff
border:1px solid #c00
padding:0
position:relative
top:-5px
left:-5px
}
.tupian img {
vertical-align:bottom/*去除图片下方的空隙*/
}
