Vertiefendes Verständnis von CSS-Schatteneffekten: Detaillierte Erklärung und Übung der Box-Shadow-Eigenschaften

einführen

     box-shadowIst eine Eigenschaft, die in CSS verwendet wird, um Schatteneffekte zu Elementen hinzuzufügen. Damit können Sie Schattengröße, Farbe, Unschärfe, Versatz, innere und äußere Schatten und mehr steuern.

---

Grammatik

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

• h-shadow: Der Schattenversatz in horizontaler Richtung.
• v-shadow: Schattenversatz in vertikaler Richtung.
• blur: Der Unschärferadius des Schattens, optionaler Parameter.
• spread: Die erweiterte Größe des Schattens, optionaler Parameter.
• color: Die Farbe des Schattens.
• inset: Optionaler Parameter, der zum Erzeugen eines inneren Schatteneffekts verwendet wird.

---

Beispiel

.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);
}

erklären

• .shadowElemente der Klasse haben einen Schatteneffekt mit einem Versatz von 2 Pixeln nach unten und rechts, einem Radius von 4 Pixeln, der Farbe Schwarz und einer Deckkraft von 0,5.
• .inner-shadow