-
box-shadowの構文と値: box-shadowプロパティは、以下のような構文を持ちます。
box-shadow: h-shadow v-shadow blur spread color inset;- h-shadow: 水平方向の影の位置を指定します。正の値は右方向、負の値は左方向を意味します。
- v-shadow: 垂直方向の影の位置を指定します。正の値は下方向、負の値は上方向を意味します。
- blur: 影のぼかしの程度を指定します。値が大きいほどぼかしが強くなります。
- spread: 影の拡散の程度を指定します。値が正の場合は影が広がり、負の場合は収束します。
- color: 影の色を指定します。一般的には、16進数値やRGB値で指定します。
- inset (オプション): 影を要素の内側に配置する場合に使用します。
-
ベーシックな影のスタイル: 以下のコードは、基本的な影のスタイルを実装する例です。
.box { box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); }この例では、要素に右下方向に2ピクセルの水平影と2ピクセルの垂直影を追加し、4ピクセルのぼかしを適用しています。影の色は半透明の黒色です。
-
複数の影の追加: box-shadowプロパティを複数回使用することで、要素に複数の影を追加することができます。以下のコードは、内側に白色の影と外側に黒色の影を追加する例です。
.box { box-shadow: inset 0 0 5px white, 0 0 10px black; } -
影の形状の制御: box-shadowプロパティを使用して、影の形状を制御することもできます。以下のコードは、要素に四角い影を追加する例です。
.box { box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); border-radius: 10px; }border-radiusプロパティを使用することで、要素の角を丸くし、影の形状を四角いままにします。
以上が、box-shadowプロパティの基本的な使い方といくつかのテクニックの紹介です。これらのコード例を参考に、ウェブデザインで影のエフェクトを利用する際に役立ててください。