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

本文主要是介绍用简单的css代码为相册图片加上漂亮阴影~~~转载自HackerPrince的空间，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

css代码非常简单：

xhtml：

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

　　这里主要设置了span标签相对定位，再把它负向移动4px，当然如果你想要阴影在右下则设置上，左为负向移动4px；要阴影在左下则设置上，右为负向移动4px，这里的4px可以自由设置，代表阴影的远近，其他的应该比较容易理解的，还要注意的是span标签一定要设置 display:block;　否则在FF,OP等浏览器下不会自由适应图片的高度，如果用div则无需设置，这可能也是标签和层的一点小区别吧．

这篇关于用简单的css代码为相册图片加上漂亮阴影~~~转载自HackerPrince的空间的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！