在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>