【CSS3】box-shadow について

「box-shadow」はCSS3のプロパティで、ボックスに影を付けられます。

指定方法は、水平方向・垂直方向・ぼかし・色の順になっています。

サンプルでは、paddingやborderなどもろもろ調整を入れています。

また、複数のブラウザでも適用される指定になっています。

IEにも適用させるためには、PIEというファイルを使用する必要があります。ファイルは下記よりダウンロード可能です。

PIEのダウンロード

任意の場所へファイルをアップし、CSSにPIEを読み込ませるように指定します。

◆HTML

<div id="boxShadow">
<h1>テキスト</h1>
</div>

◆CSS

#boxShadow {
width: 500px;
text-align: center;
margin: 10px 0 20px;
padding: 20px;
background-color: #ffffff;
border: 2px solid #333333;
-webkit-box-shadow: 4px 4px 2px #ccc; /* Chrome */
-moz-box-shadow: 4px 4px 2px #ccc; /* Firefox */
box-shadow: 4px 4px 2px #ccc;
behavior:url(PIE/PIE.htc);
}

Chrome、Firefox、IE6～9まで表示確認が出来てます。

サンプルページはこちら