大多數浏覽器對圖檔的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>