用相对定位和负向移动实现阴影效果

很多朋友喜欢给自己的页面元素加上阴影效果，通常的做法是用图片，图片有效果逼真等优点，但是，同时也加大了服务器的负担，延长了页面加载时间，本文介绍的是用 CSS 相对定位和负向移动实现的阴影效果，代码简洁，效果还不错。

用相对定位和负向移动实现阴影效果 – 示例

<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>