デザイナーから、大きさが可変のイメージをおしゃれな枠線で囲んだデザインが上がってきたので、border-image + drop-shadow で実装することにしました。
border-imageの実装
このような9分割できる素材を用意しましょう。
(ぼかしはCSSでいれようと思っているので素材にはいれていません)
CSS
body { background: #272822; } img { display: block; margin: 20px auto; border-style: solid; border-width: 10px; -webkit-filter: drop-shadow(0 0 5px rgba(233, 186, 27, .8)); } .stretch { border-image: url(http://jsrun.it/assets/W/g/z/9/Wgz9x.png) 20 stretch; } .round { border-image: url(http://jsrun.it/assets/W/g/z/9/Wgz9x.png) 20 round; } .repeat { border-image: url(http://jsrun.it/assets/W/g/z/9/Wgz9x.png) 20 repeat; } .space { border-image: url(http://jsrun.it/assets/W/g/z/9/Wgz9x.png) 20 space; }
HTML
<img class="stretch" src="http://jsrun.it/assets/K/t/b/O/KtbOr.jpeg" width="250" height="250" /> <img class="round" src="http://jsrun.it/assets/K/t/b/O/KtbOr.jpeg" width="250" height="250" /> <img class="repeat" src="http://jsrun.it/assets/K/t/b/O/KtbOr.jpeg" width="250" height="250" /> <img class="space" src="http://jsrun.it/assets/K/t/b/O/KtbOr.jpeg" width="250" height="250" />
DEMO
border-image-repeat は round が良さそうです。
※ Chromeでご観覧ください
drop-shadowでぼかす
box-shadow ではなく drop-shadow をつかってぼかします。
CSS
body { background: #272822; } img { display: block; margin: 20px auto; border-style: solid; border-width: 10px; -webkit-filter: drop-shadow(0 0 5px rgba(233, 186, 27, .8)); } .stretch { border-image: url(http://jsrun.it/assets/W/g/z/9/Wgz9x.png) 20 stretch; } .round { border-image: url(http://jsrun.it/assets/W/g/z/9/Wgz9x.png) 20 round; } .repeat { border-image: url(http://jsrun.it/assets/W/g/z/9/Wgz9x.png) 20 repeat; .space { border-image: url(http://jsrun.it/assets/W/g/z/9/Wgz9x.png) 20 space; }
DEMO
※ Chromeでご観覧ください
だいたい再現できました。