Die CSS-Eigenschaft „box-shadow“ fügt Schatteneffekte um ein Element hinzu. Dies kann verwendet werden, um einem Element Tiefe und Dimension zu verleihen oder es vom Rest des Inhalts auf einer Seite hervorzuheben.
Die Eigenschaft „box-shadow“ nimmt bis zu vier Werte an, die den Versatz, die Unschärfe und die Ausbreitung des Schattens sowie die Farbe des Schattens angeben.
1. Offset :Die Offset-Werte geben den horizontalen und vertikalen Abstand des Schattens vom Element an. Positive Werte verschieben den Schatten nach rechts und unten, während negative Werte den Schatten nach links und oben verschieben.
2. Unschärfe :Der Unschärfewert gibt den Grad der Unschärfe an, die auf den Schatten angewendet wird. Ein höherer Unschärfewert erzeugt einen weicheren Schatten, während ein niedrigerer Unschärfewert einen schärferen Schatten erzeugt.
3. Verteilen :Der Ausbreitungswert gibt den Umfang der Ausbreitung an, die auf den Schatten angewendet wird. Ein höherer Streuwert erzeugt einen breiteren Schatten, während ein niedrigerer Streuwert einen schmaleren Schatten erzeugt.
4. Farbe :Der Farbwert gibt die Farbe des Schattens an. Es kann jeder gültige CSS-Farbwert verwendet werden.
Hier sind einige Beispiele dafür, wie Sie mit der Eigenschaft „box-shadow“ verschiedene Arten von Schatten erstellen können:
- Um einen einfachen Schlagschatten zu erstellen, verwenden Sie einen positiven Offset-Wert und einen niedrigen Unschärfewert, wie folgt:
„css
Kastenschatten:5px 5px 5px #888888;
„
- Um einen weicheren Schatten zu erzeugen, erhöhen Sie den Unschärfewert wie folgt:
„css
Kastenschatten:5px 5px 10px #888888;
„
- Um einen breiteren Schatten zu erzeugen, erhöhen Sie den Ausbreitungswert wie folgt:
„css
Kastenschatten:5px 5px 10px 5px #888888;
„
- Um einen farbigen Schatten zu erstellen, geben Sie einen Farbwert wie diesen an:
„css
Kastenschatten:5px 5px 10px 5px rot;
„
Die Eigenschaft „box-shadow“ ist ein leistungsstarkes Werkzeug, mit dem sich verschiedene visuelle Effekte erzeugen lassen. Experimentieren Sie mit verschiedenen Werten, um zu sehen, was Sie erstellen können!
