請尊重版權，轉載請注明來源，多謝～～
<a href="http://webdesignerwall.com/demo/css3-image-styles/">先看下demo</a>
看一下demo，請注意在第一行的圖檔中使用了border-radius和inset box-shadow。Firefox會直接在圖檔元素上渲染border-radius，但不會渲染inset box-shadow。chrome/safari則兩者都不渲染。
要讓 border-radius 和 inset box-shadow 正常工作，解決方案就是将實際圖檔變作background-image.
上面的腳本将會輸出下面的HTML代碼：
下面是一個像卡片的圖檔風格，用了多個inset box-shadow。
通過一點兒改變，我可以将卡片風格轉換為浮雕。。。
和浮雕風格真的很像，我隻是加了1px的虛化～～
同樣隻是inset box-shadow，我可以讓它看起來像剪貼畫。
這個例子中，我為圖檔外容器增加了變形。mouseover的時候，它将從圓角形狀變為圓形，然後增加了發光效果。發光效果通過多重box-shadow實作。
發光漸變遮罩是通過:after僞元素實作的。。。
這個例子中，我将遮罩漸變移動到底部，于是它就成了倒影。。。
這個例子中，我同時使用了:before和:after僞元素來實作帶倒影的光澤效果。
這裡使用了:after僞元素來在圖檔頂部實作了膠帶風格的漸變。
在下面的這個例子中，我用了 :after元素來在mouseover的時候添加發光漸變。
發散漸變也可以用作遮罩層來實作圓形羽化效果。
本文的方法可以在支援border-radius、box-shadow、:before和:after僞元素的浏覽器上，比如Chrome/Safari/Firefox等，而在一些落後的浏覽器比如IE9(包括IE9)則不能完全支援——IE6/7/8沒有任何表現，IE9會有普通的圓角。
正如你看到的，你幾乎可以使用:before和:after僞元素實作任何效果。如果你有用CSS3實作更多的創意圖檔效果，歡迎通過評論與大家分享。