用简单的css代码为相册图片加上漂亮阴影~~~转载自HackerPrince的空间

因为最近一直在弄MePHP CMS的相册系统，所以也就一直在研究如何能够让相册的图片显示的更好，于是就想到了为图片添加阴影效果，网上的图片阴影效果一般都是用背景图片或者是css的滤镜实现的，不过用滤镜在非IE内核的浏览器下一般就没有效果了，而用背景图片虽然能够得到较好的表现，但是一来不好控制（如果用固定的背景图片，则你要显示的图片大小也要固定），二来比较麻烦（如果要自适应图片的大小，则要用很多个背景图片才能实现）。
　　现在就来介绍一种用css实现，既可以简单实现阴影效果，又可以在多种浏览器下都有良好表现的方法，当然它也可以用在其他的地方，不一定非要用来显示图片，先来看看演示：
attachment/pic_shadow.html

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>

　　上面是显示图片的代码，用列表显示图片是我认为的最好的办法，简洁方便而且有弹性，在实现阴影的这个代码里就更加有用处，因为它会把图片包裹的很好，而不需要你来设定宽度，如果用div来做的话则必须要指定宽度，你看一下演示中的google广告的代码就晓得了．

　　这里主要设置了span标签相对定位，再把它负向移动4px，当然如果你想要阴影在右下则设置上，左为负向移动4px；要阴影在左下则设置上，右为负向移动4px，这里的4px可以自由设置，代表阴影的远近，其他的应该比较容易理解的，还要注意的是span标签一定要设置 display:block;　否则在FF