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

最初の1文字に影をつけた場合

　セレクタで「:first-letter」や「:first-line」を指定すると、最初の1文字や1行がボックスとして扱われるようになるが、これらのボックスにも影をつけることが可能だ。たとえば、<div>の最初の1文字に-webkit-border-shadowで影をつけると、次のように表示することができる。

最初の一文字に影をつけた場合

div	{
	line-height: 2;
	}

div:first-letter	{
	font-size: 2em;
	padding: 0 15px;
	margin: 0 10px 0 0;
	float: left;
	background-color: #ffaa00;
	-webkit-box-shadow: 5px 5px 5px gray;
	}

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

テーブルのセルに影をつけた場合

　テーブルや、テーブルの各セルにも影をつけることができる。たとえば、テーブルを構成する<table>と、セルを構成する<td>に-webkit-box-shadowを指定すると次のような表示になる。

テーブルと各セルに影をつけたもの

table	{
	border-spacing: 10px;
	-webkit-box-shadow: 5px 5px 20px gray;
	}

td	{
	background-color: #ffaa00;
	-webkit-box-shadow: 5px 5px 5px gray;
	padding: 10px;
	}

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