CSSだけで要素に二重の線を引く方法を紹介いたします。
CSSだけで要素に二重の線を引く方法
HTMLはシンプルにdivのみで説明いたします。
<div class="test">TEST</div>
CSSでは、borderプロパティで線を引き、追加でbox-shadowを指定します。
.test {
border-bottom: solid 1px #ccc;
box-shadow: 0 1px 0 #fff;
}
上記の場合、.testに対して#cccと#fffの下線がつきます。box-shadow側は、ぼかしの値を0にすることで通常の線を引いています。
このように、borderとbox-shadowを組み合わせることで、1つの要素に対して二重の線を引くことができます。
要素全体に線を引きたい場合、box-shadowのみで二重線を引くこともできます。
.test {
box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff;
}
このように太さの違う影を指定することで、二重線が引けます。上記の場合、2pxの黒い線とさらにその外側に2px(4px-2px)の白い線がつきます。
他にもborderとoutlineを組み合わせる方法もあります。
.test {
border: solid 2px #000;
outline: solid 2px #fff;
}
こちらも便利な方法ですが、要素を角丸にするとoutlineが角丸に沿って線を描いてくれないため、角丸にする場合はborderとoutlineを組み合わせは使えません。
あとがき
結構色んな場面で活躍します。
2本の線を組み合わせることで、くぼみ感を表現したりすることができますので、覚えておくと便利ですよ。