用相对定位实现简单的图片边框阴影效果
<html>
<head>
<title>用CSS相对定位实现简单的阴影效果</title>
<style type="text/css">
.shadow{ float:left; margin-right:20px; background-color:#EFEFEF;}
.shadow img{ padding:4px; border:1px solid #CDCDCD; background-color:#FFFFFF; position:relative; top:-5px;left:-5px;}
</style>
</head>
<body>
<strong>简单的阴影效果</strong>
<div class="shadow">
<a href="http://www.mn-soft.com" target="_blank">
<img src="http://www.mn-soft.com/files/2010/04/logo.png" width="180" height="64" />
</a>
</div>
<div class="shadow">
<a href="http://www.mn-soft.com" target="_blank">
<img src="http://www.mn-soft.com/files/2010/04/alert.png" width="248" height="192" />
</a>
</div>
<div class="shadow">
<a href="http://www.mn-soft.com" target="_blank">
<img src="http://www.mn-soft.com/files/2010/04/miniphoto.jpg" width="392" height="252" />
</a>
</div>
</body>
</html>
<head>
<title>用CSS相对定位实现简单的阴影效果</title>
<style type="text/css">
.shadow{ float:left; margin-right:20px; background-color:#EFEFEF;}
.shadow img{ padding:4px; border:1px solid #CDCDCD; background-color:#FFFFFF; position:relative; top:-5px;left:-5px;}
</style>
</head>
<body>
<strong>简单的阴影效果</strong>
<div class="shadow">
<a href="http://www.mn-soft.com" target="_blank">
<img src="http://www.mn-soft.com/files/2010/04/logo.png" width="180" height="64" />
</a>
</div>
<div class="shadow">
<a href="http://www.mn-soft.com" target="_blank">
<img src="http://www.mn-soft.com/files/2010/04/alert.png" width="248" height="192" />
</a>
</div>
<div class="shadow">
<a href="http://www.mn-soft.com" target="_blank">
<img src="http://www.mn-soft.com/files/2010/04/miniphoto.jpg" width="392" height="252" />
</a>
</div>
</body>
</html>
来源:css88.com