[CSS]画像に美しい角丸とボックスシャドウを適用する方法

img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。
これを解消するCSSのTrickを紹介します。

CSS3 Rounded Image With jQuery
デモページ

FirefoxとWebkitブラウザ（Safari）のそれぞれにCSS3の角丸とボックスシャドウを適用すると、上記のように美しく表示されません。
それを下記のように美しく適用されるようにします。

角丸とボックスシャドウをこういう風にしたい
左：角丸と外側にシャドウ、右：角丸と内側にシャドウ

CSS3で素直にスタイリング

Firefoxでは角丸が適用されず、Safariではボックスシャドウが適用されません。

Firefoxのキャプチャ

HTML

CSS

CSSのTrickを使用

background-imageを使用して、この問題を解決します。

Firefoxのキャプチャ

HTML

CSS

Trickは非常にシンプルです。
img要素をspanで内包します。

オリジナルとなるimg要素は「opacity:0」か「display:none」で隠し、span要素の背景を目に見える画像として表示します。
「display:none」は画像のダウンロードが不可になるため、「opacity:0」を使用した方がよいでしょう。

CSSのTrickにjQueryを併用

上記のCSSのTrickを簡単に実現するために、jQueryを使用してspanを自動で配置するようにします。

Firefoxのキャプチャ

HTML

spanはスクリプトで自動挿入するので、追加のマークアップは必要ありません。

CSS

CSSはCSSのTrickと同じものを使用します。

JavaScript

jquery.jsを外部ファイルとして指定します。