为图片添加阴影效果

效果1：css代码

.pic {
 position:relative;
 background:#CCC;
 margin:10px;
 }
.pic span {
display:block;
border:1px solid #333;
background:#FFF;
position:relative;
padding: 3px;
}
.right {/*阴影在右边时*/
top:-4px;
left:-4px;
}
.left {/*阴影在左边时*/
top:-4px;
right:-4px;
}

xhtml：

 <ul>
 <li class="pic"><span class="right"><img src="pic_shadow.jpg" border=0 alt="pic" /></span></li>
 <li class="pic"><span class="left"><img src="pic_shadow.jpg" border=0 alt="pic" /></span></li>
 </ul>

还要注意的是span标签一定要设置 display:block;　否则在FF,OP等浏览器下不会自由适应图片的高度，如果用div则无需设置.

 效果2：

css代码

.pic {
 background:none repeat scroll 0 0 #CCCCCC;
margin-bottom:5px; }
.pic span {
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #333333;
display:block;
padding:3px;
position:relative;

}
.right {/*阴影在右边时*/
top:-4px;
left:-4px;
}
.left {/*阴影在左边时*/
top:-4px;
right:-4px;
}

xhtml：

 <ul>
 <li class="pic"><span class="right"><img src="pic_shadow.jpg" border=0 alt="pic" /></span></li>
 <li class="pic"><span class="left"><img src="pic_shadow.jpg" border=0 alt="pic" /></span></li>
 </ul>