ボックスにドロップシャドウの効果をつける--Safari 3のCSS対応

値を0に設定した場合

　ぼかしの半径の値を「0」に設定すると、ぼかしのない四角い影を表示することができる。

ぼかしの半径を「0」にしたもの

div	{
	background-color: #ffaa00;
	-webkit-box-shadow: 10px 10px 0 gray;
	}

※ブラウザで表示を確認する

　また、オフセットを「0」にすると、ボックスのまわりに影を表示することが可能だ。

オフセットの値を「0」にしたもの

div	{
	background-color: #ffaa00;
	-webkit-box-shadow: 0 0 50px gray;
	}

※ブラウザで表示を確認する

　オフセットにはマイナス値を指定することが認められているので、ボックスの左上に影を表示することもできる。なお、ぼかしの半径にマイナス値を指定することは認められていない。

オフセットにマイナスの値を指定したもの

div	{
	background-color: #ffaa00;
	-webkit-box-shadow: -10px -10px 10px gray;
	}

※ブラウザで表示を確認する