box-shadow ist der Schatten einer Box, aus vier Maßen und einer Farbe. Er nimmt keinen Platz ein und verschiebt deshalb nichts.
- box-shadow
Eigenschaft, die einen Schatten um die Box eines Elements legt.
Beispiel: „Ein box-shadow nimmt keinen Platz ein und verschiebt deshalb nichts.“Auch: Schlagschatten.
Die Werte
box-shadow: 0 2px 8px rgb(0 28 68 / 0.08);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4);Versatz waagerecht, Versatz senkrecht, Weichzeichnung, optional Ausdehnung, dann die Farbe. Glaubwürdig wirkt ein Schatten, wenn er leicht nach unten versetzt und stark weichgezeichnet ist, mit einer Farbe aus dem Dunklen der Palette statt mit reinem Schwarz.
Innen und mehrfach
Mit inset liegt der Schatten innen, was Vertiefungen und feine Lichtkanten ergibt. Mehrere Schatten lassen sich mit Komma stapeln; zwei übereinander, einer eng und einer weit, wirken natürlicher als ein einzelner.