ちょっと訳あって、CSS3 の影のサンプルを書いてみました。
– [box-shadow のサンプル](https://bowz.info/wp-content/uploads/2010/06/css3-radius-shadow/box-shadow.html)
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](http://www.css-lecture.com/log/css3/css3-text-shadow-box-shadow.html)
– [CSS3メモ「box-shadow」の使い方 | Coder’s Note](http://codersnote.com/archives/css3-memo-box-shadow)
ありがとうございます。