CSS3 ボックスに影をつけるサンプル(box-shadow)

CSS3のボックスに影をつけるサンプルです。
box-shadowを使用します。

サンプル

box-shadowのサンプルです。

test1
offset-x

test2
offset-x

test3
offset-y

test4
blur-radius

test5
spread-radius

test6
color

test7
inset

box-shadow プロパティ

box-shadow : 値1　値2　値3　値4　値5　値6

値	説明
値1 (offset-x)	数値+単位。指定した値の分、影が右にずれます。マイナス値を指定した場合は左にずれます。
値2 (offset-x)	数値+単位。指定した値の分、影が下にずれます。マイナス値を指定した場合は上にずれます。
値3 (blur-radius)	数値+単位。影をぼかす範囲です。省略可能です。省略した場合は0になります。値が0の場合、輪郭がはっきりし、値が大きくなるにつれぼかしが強くなります。
値4 (spread-radius)	数値+単位。影が広がる範囲です。省略可能です。省略した場合は0になります。正の値の場合、影がすべての方向に広がり、マイナスの値の場合、小さくなります。
値5 (color)	色を指定します。省略可能です。省略した場合の色はブラウザに依存します。
値6 (inset)	inset。ボックスの内側に影が表示されます。省略可能です。
値を継承しない

ボックスに影をつけます。
以下はMDNの box-shadow のリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow

コード

上記サンプルのコードです。

<style>
#test1{
	/* 1つ目の値(影が右にずれる)は5pxを指定 */
	box-shadow:5px 5px 5px 0px 	#000;
}
#test2{
	/* 1つ目の値(影が右にずれる)は15pxを指定 */
	box-shadow:15px 5px 5px 0px #000;
}
#test3{
	/* 2つ目の値(影が下にずれる)は15pxを指定 */
	box-shadow:5px 15px 5px 0px #000;
}
#test4{
	/* 3つ目の値(影をぼかす範囲)は15pxを指定 */
	box-shadow:5px 5px 15px 0px #000;
}
#test5{
	/* 4つ目の値(影が広がる範囲)は10pxを指定 */
	box-shadow:5px 5px 5px 10px #000;
}
#test6{
	/* 5つ目の値(色を指定)は#87CEEBを指定 */
	box-shadow:5px 5px 5px 0px #87CEEB;
}
#test7{
	/* 6つ目の値にinsetを設定 */
	box-shadow:5px 5px 5px 0px #000 inset;
}
.c1 div{width:300px;border:1px solid #000;text-align:center;
margin-bottom:20px;background-color:#E0FFFF;height:50px;}
</style>
<body >
<div class="c1">
	<div id="test1" >test1<br>offset-x</div>
	<div id="test2">test2<br>offset-x</div>
	<div id="test3">test3<br>offset-y</div>
	<div id="test4">test4<br>blur-radius</div>
	<div id="test5">test5<br>spread-radius</div>
	<div id="test6">test6<br>color </div>
	<div id="test7">test7<br>inset</div>
</div>
</body>