在css3中，直接在图片上使用box-shadow 和 border-radius，浏览器并不能很好的渲染。但是如果把图片作为background-image，添加的样式浏览器可以很好的渲染。我将会介绍如何使用box-shadow, border-radius 和 transition创建不同图片样式效果。
通过查看demo能注意到，我们为第一行图片设置了border-radius 和 内嵌box-shadow。firefox渲染了图片的border-radius，但是没有渲染内嵌box-shadow。chrome和Safari两种效果都没有渲染。
firefox效果：
chrome/safari
为了使border-radius 和 内嵌box-shadow能够正常工作，我们需要把图片转换成background-image的方式。
为了动态完成这一工作，我们需要借助jquery为每一个图片添加背景图片的包装。下面的js代码为每一个图片添加了一个span的包装，span的背景图片路径就是图片的路径。
代码比较简单，我想就没有讲解的必要了。不清楚了可以直接去查jquery的api。
上面的代码会输出如下结果：
添加我们使用border-radius来实现圆形图片的效果，效果如下：
css：
下面是卡片风格的图片，使用了多个内嵌box-shadow。
下面是浮雕效果。
相对于浮雕样式，新样式添加了1px blur属性。
使用内嵌box-shadow就可以实现抠图效果。
在这个例子中我们为图片包装添加transition属性，鼠标滑过的时候，他会从圆角变为圆形。然后我们使用多个box-shadow实现发光效果。
高光的效果是通过为元素添加 :after 伪类实现的。
在这个例子中，我们将高光效果移到底部就实现倒影效果。
本例我们使用:before 和 :after 将高光和倒影效果组合起来。
在这个例子中，我们使用:after来实现胶带的效果。
css：
在这个例子中，我们在元素上使用:after，当鼠标进过的时候实现径向渐变的效果。
我们同样可以使用径向渐变产生遮罩，实现羽化的效果。
这种实现方式在大多数支持border-radius, box-shadow, :before and :after特性的浏览器中（例如Chrome, Firefox 和 Safari），都能很好的工作。在不支持新特性的浏览器中，只会显示原始图片。
借助:before 和:after伪类能为图片创造很多种样式，你可以自己尝试创建出新的效果。
<a href="http://www.cnblogs.com/softlover/tag/HTML5%E5%AE%9E%E8%B7%B5/">HTML5实践系列</a>
<a href="http://www.vancl.com/?source=kbh1983&sourcesuninfo=ad-3090-1-52-0-1" target="_blank"></a>