CSS3のbox-shadowプロパティの使い方の詳細な例

CSS には多くの属性があります。特に複数の値を設定する必要がある属性は、長期間使用しないと忘れられやすくなります。たとえば、box-shadow です。CSS3 で box-shadow を使用するたびに、使い方が思い出せず、対応する効果を得るために情報を調べなければなりません。では、後で確認できるように、box-shadow と box-shadow 内の影の使い方をまとめましょう。

1. ボックスシャドウ構文

box-shadow: none | inset (オプション値、設定されていない場合は外部投影、設定されている場合は内部投影) x-offset (影の水平オフセット、正の方向は右) y-offset (影の垂直オフセット、正の方向は下) blur-radius (影のぼかし半径、正、0 はぼかし効果なし、値が大きいほどぼかしが強くなります) spread-radius (影の拡張半径、正または負の値になります) color (オブジェクトの影の色を設定します)

プロパティ値の説明:

1. 影の種類: このパラメータはオプションです。デフォルトの投影モードは外側の影です。値が「インセット」のみの場合、外側の影が内側の影に変更されます。

2. X オフセット: 影の水平オフセットを指します。値は正または負になります。正の場合、影はオブジェクトの右側にあります。負の場合、影はオブジェクトの左側にあります。

3. Y オフセット: 影の垂直オフセットを指します。この値は正または負の値を取ることができます。正の値の場合、影はオブジェクトの下部にあります。負の値の場合、影はオブジェクトの上部にあります。

4. 影のぼかし半径: このパラメータはオプションで、正の値のみを指定できます。値が 0 の場合、影にぼかし効果がないことを意味します。値が大きいほど、影の端がぼやけます。

5. 影の拡張半径: このパラメータはオプションで、その値は正または負にすることができます。正の場合、影全体が拡張され拡大され、そうでない場合は縮小されます。

6. 影の色: このパラメータはオプションです。色が設定されていない場合、ブラウザはデフォルトの色を使用します。ただし、ブラウザによってデフォルトの色は異なります。特に、WebKit カーネルの Safari および Chrome ブラウザは無色、つまり透明になります。このパラメータを省略しないことをお勧めします。

**注:** 影のレイヤーが複数ある場合、最も内側のレイヤーの優先度が最も高く、後続のレイヤーの優先度は低くなります。区切るにはカンマ「,」を使用します。

2. ボックスシャドウの実用化

例1：X軸とY軸を設定せずに、影のぼかし半径を15pxに設定すると、半径と色の範囲内で効果を発揮します。

ボックスシャドウ: 0 0 15px #f00;

効果画像:

例2：X軸とY軸を正の値に設定する（正の値のX軸は右を向き、Y軸は下を向きます）

ボックスの影:4px 4px 15px #f00;

効果画像:

例 3: box-shadow: inset は、box-shadow の内側の影です。上記と同じですが、インセットが追加されています。

ボックスシャドウ:0 0 15px #f00 インセット;

効果画像:

例4: 正方形の4辺の色を異なる色に設定し、影のぼかし半径を10pxにする

box-shadow:-10px 0px 10px 赤、/左影/

0px -10px 10px 黒、/上部の影/

10px 0px 10px 緑、/右影/

0px 10px 10px 青;" /下の影/ >

効果画像:

上記では、CSS3 での box-shadow の使い方、box-shadow: inset 内部シャドウの使い方、そして box-shadow の実際の応用について紹介しました。 box-shadow の周囲にどのような効果を設定するかは、具体的な要件によって異なります。

CSS3のbox-shadowプロパティの使い方の詳しい例については以上です。CSS3のbox-shadowプロパティについてさらに詳しく知りたい方は、123WORDPRESS.COMの過去記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。