CSS の box-shadow を使った画像輪郭のぼかし デモ

画像ファイル(owl.jpg)

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>

CSS の box-shadow を使った画像輪郭のぼかし : Serendip - Webデザイン・プログラミング