CSS には影効果が必要_html/css_WEB-ITnose

box-shadow: 0 0 10px 10px #b9bcbf;

CSS3 box-shadow プロパティ

CSS リファレンスマニュアル

例

div 要素に box-shadow を追加します:

div{box-shadow: 10px 10px 5px #888888;}

自分で試してみてください

Bottomページの他にもたくさんの例があります。

ブラウザのサポート

IE Firefox Chrome Safari Opera IE9+ 、Firefox 4、Chrome、Opera、Safari 5.1.1 は box-shadow 属性をサポートしています。

定義と使用法

box-shadow プロパティは、ボックスに 1 つ以上の影を追加します。

ヒント: 美しいスケーラブルなボタンを構築するには、border-image-* プロパティを使用してください。

デフォルト: none 継承: no バージョン: CSS3 JavaScript 構文: object.style.boxShadow="10px 10px 5px #88 8888"

文法

box-shadow: h-shadow v-shadow blur spread color inset;

注: box-shadow は、ボックスに 1 つ以上の影を追加します。このプロパティは、影のコンマ区切りのリストで、それぞれ 2 ～ 4 の長さの値、オプションの色の値、およびオプションの inset キーワードで指定されます。省略された長さの値は 0 です。

値の説明 テスト h-shadow必須。水平方向の影の位置。負の値も許可されます。 テストv-shadow必須。垂直影の位置。負の値も許可されます。 テストぼかしオプション。曖昧な距離。 テスト拡散オプション。影のサイズ。 テストカラーオプション。影の色。 CSS カラー値を参照してください。 テスト挿入オプション。外側のシャドウ（アウトセット）を内側のシャドウに変更します。 テスト

自分で試してみる - 例

テーブルに投げられた写真 この例では、「ポラロイド」写真を作成し、その写真を回転する方法を示します。

関連ページ

CSS3 チュートリアル: CSS3 Border

CSS リファレンス マニュアル

忘れるのを恐れて、まずここに移動してください。