[ CSS3 ] 影 ( box-shadow ) のサンプル

ちょっと訳あって、CSS3 の影のサンプルを書いてみました。

box-shadow のサンプル

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 LectureCSS3メモ「box-shadow」の使い方 | Coder’s Note

ありがとうございます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です