box-shadowを使った複数の線のひき方

目次

• はじめに
• 複数の線のひき方
• まとめ

はじめに

box-shadowを使って、線を引くことができます。さらに、１つのbox-shadowで複数指定することもできますので、ご紹介します。

複数の線のひき方

サンプルを紹介する前に、box-shadowの使い方を簡単におさらいします。
box-shadow: たて方向 よこ方向 ぼかし 広がり #カラーコードの順に指定します。では、早速サンプルをみてみましょう。

サンプル１

ボックの内側（insetを使う）に、外側の線からから順に指定しています。「,（カンマ）」で区切ることで、複数の指定ができます。

		<div class="sample01"></div>
		

		.sample01 {
			width: 80px;
			height: 80px;
			box-shadow: 0px 0 0 10px #A3CEC9 inset,
			0px 0 0 20px #60c5ba inset,
			0px 0 0 30px #cff09e inset;
		}
		

サンプル２

３色ラインを線状にひいています。box-shadowのたて方向の部分の数値だけ調整して、水平方向に伸びるようになっています。注意点として、一色目だけborderで指定しています。

		<div class="sample02"></div>
		

		.sample02 {
			border-bottom: solid 10px #cff09e;
			/*  ↓box-shadow: 0px 10px 0 0 #カラーコードの略  */
			box-shadow: 0px 10px #60c5ba,
			0px 20px #A3CEC9;
		}
		

まとめ

いかがでしたか？
変わった使い方ですが、こういうこともできるんだなと知識の引き出しに入れてもらえたら幸いです。

参考サイト

box-shadow－CSS3リファレンス