大多数浏览器对图片的border-radius 和内嵌 box-shadow效果渲染的并不是很完美。这也就意味着，你不能为图片创建浮雕、高光和压缩等效果。
在之前的解决方案中，我们为图片的包装添加background-image属性，解决了上述问题。
使用background-image的问题是，他不能实现图片大小的动态缩放。所以，这种方式对于要求图片缩放的响应式设计来说就不那么适用了。
新解决方式和之前的有些相似，我们把css3的效果添加到图片遮罩层 :after 伪类上，这样做的好处是图片保持了完整性和可收缩性。
jquery会查询#demo下面所有的图片，然后为他们动态添加 span 包装。
上面的代码会输出下面的结果：
css技巧很简单，遮罩的效果被用在了.image-wrap:after 上面，border-radius 同时用在了图片和.image-wrap:after上面，来实现样式效果。
很多不同的效果，例如：浮雕、抠图、压缩和高光等，都可以通过使用多个内嵌box-shadows属性来实现。当然你也可以通过使用:before，来实现另外的布局效果，例如高光。可以查看demo源代码，去了解更多详情。之后，可以调整你浏览器窗口的大小，来查看图片大小是否发生了变化。
这个技巧，只要是支持 Javascript 和 CSS3 的大多数现代浏览器都支持，例如：Chrome, Firefox, Safari, and IE9+。
<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>