• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

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

投稿者アイコン
2019/10/23
書いた人:
rurippa!
カテゴリ:
CSS
4,783 views

CSS「box-shadow」を使った複数の線のひき方を紹介します。

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

目次

はじめに

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

複数の線のひき方

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

サンプル1

ボックの内側(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;
		}
		

サンプル2

3色ラインを線状にひいています。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リファレンス


この記事を読んだ人はこんな記事も読んでいます