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

ボックスの角を丸くした場合

　border-radiusプロパティでボックスの角を丸くすると、影も丸く表示される。Safari 3では-webkit-border-radiusで角丸を指定することが可能だ。border-radiusについては、下記2つの記事で紹介したので参考にしてほしい。

• CSSで罫線を角丸で表示する（1）
• CSSで罫線を角丸で表示する（2）

ボックスを角丸で表示したもの

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

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

インライン要素に影をつけた場合

　インライン要素に影をつけることもできる。たとえば、<span>に対して-webkit-box-shadowを指定すると次のような表示になる。なお、影の表示はテキストなどのレイアウトには影響しない。

インライン要素に影をつけたもの

div	{
	line-height: 2;
	}

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

<div>
こんにちは。おはようございます。また会いましょう。
こんにちは。おはようございます。また会いましょう。
<span>こんにちは。おはようございます。また会いましょう。</span>
こんにちは。おはようございます。また会いましょう。
こんにちは。おはようございます。また会いましょう。
</div>

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