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

スポンサードリンク

ちょっと訳あって、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 */

参考にさせてもらったページ

ありがとうございます。

スポンサードリンク

この記事が気に入ったら、ぜひシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。