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。ボックスの内側に影が表示されます。省略可能です。
値を継承しない

コード

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

<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>

関連の記事

CSS 背景色を指定するサンプル(background-color)
CSS 背景画像を指定するサンプル(background-image)
CSS 背景画像の繰り返し方法を指定するサンプル(background-repeat)
CSS3 枠線の角を丸くするサンプル(border-radius)
CSS3 文字に影をつけるサンプル(text-shadow)
CSS3 透明度を指定するサンプル(opacity)
CSS3 線のグラデーションのサンプル(linear-gradient)
CSS3 円のグラデーションのサンプル(radial-gradient)




△上に戻る