【CSS】1つのタグで内側に2重のボーダーの枠を作るメモ
下の画像のような内側にボーダーを作るメモ。
HTML
<div class="box-inner-border">内側ボーダーの枠のボックス</div>CSS(SCSS)
.box-inner-border{
background: #1a266d;
padding: 40px;
position: relative;
color:#fff;
& > *{
z-index: 1;
position: relative;
}
&:after{
content: "";
border:5px solid #fff;
position: absolute;
top:6px;
bottom:6px;
right:6px;
left:6px;
}
}DEMO
疑似要素のafterで.box-inner-borderの中に白ボーダーの一回り小さいボックスを敷き詰めている感じ。
ポイントはこれ↓がないとボックス内の要素がクリックやテキスト選択できなくなったりする。
& > *{
z-index: 1;//重要
position: relative;//重要
}内側のボーダー(白線)を太くするにはafterのborderの太さで調整
&:after{
content: "";
border:5px solid #fff;//白ボーダー部分
position: absolute;
top:6px;
bottom:6px;
right:6px;
left:6px;
}白線の外側のボーダー(ボーターに見えるが厳密には余白)を太くするには下の数値を調整すればOK。
&:after{
content: "";
border:5px solid #fff;
position: absolute;
top:6px;//白ボーダーの外側の青ボーダーの上の部分
bottom:6px;//白ボーダーの外側の青ボーダーの下の部分
right:6px;//白ボーダーの外側の青ボーダーの右の部分
left:6px;//白ボーダーの外側の青ボーダーの左の部分
}ストライプのボーダーの作り方と基本的な考えは同じ。
