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

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

CSS3 Rounded Image With jQuery
デモページ

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

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

CSS3で素直にスタイリング

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

Firefoxのキャプチャ

HTML

<img src="img/thumb1.jpg" width="70" height="70" class="normal-img" />
<img src="img/thumb2.gif" width="70" height="70" class="normal-img-2" />

CSS

.normal-img {
	background: #ccc;
	border: solid 1px #000;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.normal-img-2 {
	display: inline-block;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, 1), 0 -1px 0 rgba(0, 0, 0, .6);
	-moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
	box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, 1), 0 -1px 0 rgba(0, 0, 0, .6);
}

CSSのTrickを使用

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

Firefoxのキャプチャ

HTML

<span class="rounded-img" style="background: url(img/thumb1.jpg) no-repeat center center; width: 70px; height: 70px;">
<img src="img/thumb1.jpg" style="opacity: 0;" />
</span>

<span class="rounded-img2" style="background: url(img/thumb2.gif) no-repeat center center; width: 70px; height: 70px;">
<img src="img/thumb2.gif" style="opacity: 0;" />
</span>

CSS

.rounded-img {
	display: inline-block;
	border: solid 1px #000;
	overflow: hidden;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.rounded-img2 {
	display: inline-block;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
	-moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
	box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
}

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

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

CSSのTrickにjQueryを併用

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

Firefoxのキャプチャ

HTML

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

<img src="img/thumb1.jpg" class="rounded-img" />
<img src="img/thumb2.gif" class="rounded-img2" />

CSS

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

JavaScript

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

<script type="text/javascript">
$(document).ready(function(){

	$(".rounded-img, .rounded-img2").load(function() {
		$(this).wrap(function(){
			return '<span class="' + $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
		});
		$(this).css("opacity","0");
	});

});
</script>