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

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

CSSだけで一つの要素に二重の線を引く方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加

CSSだけで要素に二重の線を引く方法を紹介いたします。

スポンサードリンク

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

HTMLはシンプルにdivのみで説明いたします。

HTML
<div class="test">TEST</div>

CSSでは、borderプロパティで線を引き、追加でbox-shadowを指定します。

CSS
.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 で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。