ホーム>Web デザインのチュートリアル>ウェブ特殊効果

CSS3 プロパティ box-shadow の使用に関するチュートリアル

著者：Eve Cole 更新時間：2010-05-14 17:29:27

CSS3のbox-shadow プロパティを使用すると、レイヤーのシャドウ効果を簡単に実現できます。この属性を実際に詳しく説明しましょう。

1. box-shadow属性のブラウザ互換性

まず、この属性のブラウザ互換性を見てみましょう。

  • Opera: この記事をテストのために投稿したとき、Opera を最新バージョン 10.53 に更新したところですが、すでに box-shadow 属性がサポートされています。
  • Firefox は、プライベート プロパティ-moz-box-shadowを通じてこれをサポートします。
  • Safari と Chrome は、プライベート プロパティ-webkit-box-shadowを通じてこれをサポートします。
  • すべての IE でサポートされているわけではありません (IE9 が改善されているかどうかはわかりません)。心配しないでください。記事の最後で IE のハックをいくつか紹介します。

2. box-shadow属性の構文

box-shadow には 6 つの設定可能な値があります。

img{box-shadow: 影の種類 X 軸変位 Y 軸変位 影のサイズ 影の延長 影の色}

  • 影のタイプが設定されていない場合、デフォルトは影効果です。インセットに設定すると、インナーシャドウ効果になります。
  • X軸とY軸の変位は同等ではありませんが、Photoshopの「角度」と「位置」に似ています。
  • 影のサイズ、延長、色はPhotoshopと同じです。

    3. 分析例

    いくつかの例を通してボックスシャドウの効果を見てみましょう。まず、テスト用の簡単なHTMLを作成します。

    <html>
    <頭>
    <style type="text/css">ここに CSS 部分を記述します</style>
    </head>
    <本文>
    <img src="テスト.jpg" />
    </body>
    </html>

    注: トラブルを避けるために、以下の CSS コードにはbox-shadowのみが記述されています。実際に使用する場合は、-moz-box-shadow と -webkit-shadow も記述する必要があります。やるべきことは非常に簡単で、2 つの box-shadow をコピーし、その前に -moz- と -webkit- を追加します。

    img {
    -moz-box-shadow:2px 2px 10px #06C;
    -webkit-box-shadow:2px 2px 10px #06C;
    box-shadow:2px 2px 10px #06C;
    }
関連記事