Zum Inhalt springen

box-shadow

  • Redaktion 
  • Zuletzt aktualisiert am

#box-shadow

Definiert den Schatten des Elements.

default box-shadow: none;

Entfernt jeden Box-Shadow, der auf das Element angewendet wurde.

box-shadow: 2px 6px;

Du brauchst mindestens zwei Werte:

  • Der erste ist der horizontale Versatz
  • Der zweite ist der vertikale Versatz

Die Schattenfarbe wird von der Textfarbe geerbt.

box-shadow: 2px 6px red;

Du kannst eine Farbe als letzten Wert definieren.

Wie bei color können Sie zwischen Farbnamen, hexadezimale, rgb, hsl… wählen.

box-shadow: 2px 4px 10px red;

Der optionale dritte Wert definiert den Weichzeichner des Schattens.

Die Farbe wird in diesem Beispiel über 10px gestreut, von undurchsichtig bis transparent.

box-shadow: 2px 4px 10px 4px red;

Der optionale vierte Wert definiert die Ausdehnung des Schattens.

Die Spreizung legt fest, wie stark der Schatten wachsen soll: Sie verstärkt den Schatten.