CSSだけで一つの要素に二重の線を引く方法

CSSだけで一つの要素に二重の線を引く方法

CSSだけで一つの要素に二重の線を引く方法

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本の線を組み合わせることで、くぼみ感を表現したりすることができますので、覚えておくと便利ですよ。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です