Serendip

Web Studio

『[CSS]画像の四辺のボーダーを一味違ったスタイルにするチュートリアル | コリス』の記事を読んで、画像のボーダーの代りにボックスのドロップシャドウを内側に向けて適用すれば画像の輪郭をぼかすことができるのではと思い試してみた。

上記記事での CSS で outline の部分を box-shadow に変更し、影を内側に向けるために inset を指定する。
また、影の色を背景色と同じものにしておく。
疑似要素で作られるボックスの top、left、bottom、right を 1px から 0 に変更する。

CSSコード

.blur, .blur > img {
    margin: 0; padding: 0;
    border: 0;
}

.blur {
    position: relative;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

.blur:after {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    -moz-box-shadow: inset 0px 0px 15px 15px #fff;
    -webkit-box-shadow: inset 0px 0px 15px 15px #fff;
    box-shadow: inset 0px 0px 15px 15px #fff;
    content: " ";
}

HTMLコード

<span class="blur"><img src="./owl.jpg" /></span>

以上で、画像の輪郭をぼかすことができた。
動作するのは、Firefox、Safari、Google Chrome、Opera といったモダンブラウザのみ。IE はダメ。

デモ

参考：Fancy Inset CSS Image Borders | Evan Byrne’ Writings