画像の内側にCSSでボーダーを引きたい！
画像の内側にボーダーを使って飾するとき、Photoshopなどで1枚ずつ加工することってあると思います。 画像の外側であれば、CSSでやってしまおうとすぐに思いつくのですが、画像の内側にボーダーを入れたいときは、 画像加工で対応しがちだと思います。 最近ではCMS化されたホームページも多く、クライアントが更新したり外部SNSサイトから画像を取得したりもします。 少し装飾したいなー、でも外側ボーダーにはもう飽きた！画像加工せずに内側にボーダーを引きたい！ そんな時に使えるサンプルを紹介します。
使用するclass名
.photoFrame：画像に枠を追加します。 .outset：画像の外側に追加します。 .inset：画像の内側に追加します。
View
Source
HTML
<span class="photoFrame outset"><img src="/-cmsadm-/wp-content/uploads/2016/09/sample.jpg" alt=""></span>
<span class="photoFrame inset"><img src="/-cmsadm-/wp-content/uploads/2016/09/sample.jpg" alt=""></span>CSS
.photoFrame { display: inline-block; }
.photoFrame.outset img {
border: 3px solid #cccccc;
background: #ffffff;
padding: 1px;
}
.photoFrame.inset {
position:relative;
line-height:0;
}
.photoFrame.inset:before {
content:"";
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
-webkit-box-sizing:border-box;
display:inline-block;
position:absolute;
top:2%;
left:1.5%;
border:3px solid rgba(255,255,255,0.5);
width:97%;
height:96%;
box-sizing:border-box;
}
SCSS
.photoFrame {
display: inline-block;
&.outset {
img {
border: 2px solid #cccccc;
background: #ffffff;
padding: 2px;
}
}
&.inset {
position:relative;
line-height:0;
&:before {
content:"";
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
-webkit-box-sizing:border-box;
display:inline-block;
position:absolute;
top:2%;
left:1.5%;
border:3px solid rgba(255,255,255,0.5);
width:97%;
height:96%;
box-sizing:border-box;
}
}
small {
display: block;
font-size: 0.75rem;
.right {text-align:right;}
.center {text-align:center;}
}
}
