Box Shadow Syntax
Die CSS box-shadow-Eigenschaft akzeptiert Werte im Format: offset-x offset-y blur-radius spread-radius color. Das optionale Schluesselwort inset platziert den Schatten innerhalb des Elements. Mehrere Schatten werden durch Kommas getrennt und in Stapelreihenfolge gerendert.
Realistische Tiefe erzeugen
Realistische Schatteneffekte verwenden mehrere Schichten mit unterschiedlichen Unschärfe- und Deckkraftwerten. Ein enger Schatten mit geringer Unschärfe bietet Definition, während ein größerer diffuser Schatten Umgebungsokklusion erzeugt. Die Kombination erzeugt natürlich aussehende Elevation.
Leistungsüberlegungen
Box-Shadows werden in modernen Browsern GPU-beschleunigt, können aber die Rendering-Leistung beeintraechtigen, wenn sie auf viele Elemente gleichzeitig angewendet werden. Vermeiden Sie es, box-shadow direkt zu animieren; verwenden Sie stattdessen Opazitaetstransitionen auf einem Pseudo-Element.
Browser-Kompatibilität
CSS box-shadow wird in allen modernen Browsern einschließlich Chrome, Firefox, Safari und Edge unterstützt. Keine Herstellerpräfixe erforderlich. Für sehr alte Browser erwägen Sie einen soliden Rahmen als Fallback.
