ちょっと訳あって、CSS3 の影のサンプルを書いてみました。
box-shadow プロパティは、CSS3 のプロパティなので IE8 で使う事ができませんが、Firefox, Safari, Google Chrome の各ブラウザは、独自拡張として実装されているので、すぐに使う事ができます。
書き方 ———————————————————————-
書き方は次のようになります。
box-shadow: [横方向] [縦方向] [ぼかし具合] [色];
影を表示する CSS ———————————————————————-
CSS3 用の記述
box-shadow: 3px 3px 3px #ccc;
Safari, Google Chrome ( Webkit ) 用の記述
-webkit-box-shadow: 3px 3px 3px #ccc;
Firefox ( Mozilla ) 用の記述
-moz-box-shadow: 3px 3px 3px #ccc;
実際に使う時は、次のように上の三つをまとめて書いておきます。
box-shadow: 3px 3px 3px #ccc; /* CSS3 */
-moz-box-shadow: 3px 3px 3px #ccc; /* Mozilla */
-webkit-box-shadow: 3px 3px 3px #ccc; /* Webkit */
参考にさせてもらったページ ———————————————————————-
– CSS3 text-shadow box-shadow の使い方 | CSS Lecture – CSS3メモ「box-shadow」の使い方 | Coder’s Note
ありがとうございます。