使用relative属性为DIV和图片添加背影

转载自：http://www.codebit.cn/pub/html/xhtml_css/tip/css_shadow/

<style type="text/css">

/* 为 DIV 加阴影 */
.out {
position:relative;
background:bbb;
margin:10px auto;
width:240px;
}
.in {
background:fff;
border:1px solid 555;
padding:10px 5px;
position:relative;
top:-5px;
left:-5px;
}

/* 为 图片 加阴影 */
.imgShadow {
position:relative;
background:bbb;
margin:10px auto;
width:220px;
}

.imgContainer {
position:relative;
top:-5px;
left:-5px;
background:fff;
border:1px solid 555;
padding:0;
}

.imgContainer img {
display:block;
}

</style> 

<h4>为 DIV 加阴影:</h4>
<div class="out">
<div class="in" >
<img src="http://www.codebit.cn/admin/tpl/default/img/logo.gif" alt="" />
</div>
</div>

<h4>为 图片 加阴影:</h4>
<div class="imgShadow">
<div class="imgContainer" >
<img src="http://www.codebit.cn/admin/tpl/default/img/logo.gif" alt="" />
</div>
</div>