CSS シャドウ効果の深い理解: box-shadow プロパティの詳細な説明と実践

導入

     box-shadowCSS で要素に影効果を追加するために使用されるプロパティです。影のサイズ、色、ぼかし、オフセット、内側と外側の影などを制御できます。

---

文法

box-shadow: h-shadow v-shadow blur spread color inset;

• h-shadow: 水平方向の影のオフセット。
• v-shadow: 垂直方向の影のオフセット。
• blur: 影のぼかし半径、オプションのパラメータ。
• spread: 影の拡張サイズ、オプションのパラメータ。
• color: 影の色。
• inset: 内側のシャドウ効果を作成するために使用されるオプションのパラメータ。

---

例

.shadow {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.inner-shadow {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}

.multiple-shadows {
  box-shadow: 
    2px 2px 4px rgba(0, 0, 0, 0.5),
    -2px -2px 4px rgba(255, 255, 255, 0.3);
}

説明する

• .shadowクラスの要素には、下と右に 2 ピクセルのオフセット、半径 4 ピクセル、色は黒、不透明度は 0.5 のシャドウ効果が適用されます。
• .inner-shadow