Detaillierte Beispiele zur Verwendung der Box-Shadow-Eigenschaft in CSS3

CSS enthält viele Attribute. Manche Attribute werden leicht vergessen, wenn sie längere Zeit nicht verwendet werden, insbesondere die Attribute, bei denen mehrere Werte festgelegt werden müssen. Beispiel: Box-Shadow. Immer wenn ich Box-Shadow in CSS3 verwende, kann ich mich nicht daran erinnern, wie es funktioniert, und muss Informationen nachschlagen, um den entsprechenden Effekt zu erzielen. Lassen Sie uns nun zusammenfassen, wie man Box-Shadow und den Schatten innerhalb von Box-Shadow verwendet, damit Sie es später nachlesen können.

1. Box-Shadow-Syntax

Box-Shadow: keiner | Inset (optionaler Wert, wenn nicht gesetzt, handelt es sich um eine externe Projektion, wenn gesetzt, handelt es sich um eine interne Projektion) X-Offset (horizontaler Versatz des Schattens, die positive Richtung ist rechts) Y-Offset (vertikaler Versatz des Schattens, die positive Richtung ist unten) Unschärferadius (Unschärferadius des Schattens, positiv, 0 bedeutet kein Unschärfeeffekt, je größer der Wert, desto unschärfer) Spread-Radius (Schattenerweiterungsradius, kann positiv oder negativ sein) Farbe (legt die Farbe des Schattens des Objekts fest)

Beschreibung des Eigenschaftswerts:

1. Schattentyp: Dieser Parameter ist optional. Der Standardprojektionsmodus ist Außenschatten. Wenn der einzige Wert „Inset“ ist, wird der Außenschatten in einen Innenschatten geändert.

2. X-Versatz: bezieht sich auf den horizontalen Versatz des Schattens. Sein Wert kann positiv oder negativ sein. Wenn er positiv ist, befindet sich der Schatten auf der rechten Seite des Objekts. Wenn er negativ ist, befindet sich der Schatten auf der linken Seite des Objekts.

3. Y-Versatz: bezieht sich auf den vertikalen Versatz des Schattens. Sein Wert kann ebenfalls positiv oder negativ sein. Wenn er positiv ist, befindet sich der Schatten unten am Objekt. Wenn er negativ ist, befindet sich der Schatten oben am Objekt.

4. Schattenunschärferadius: Dieser Parameter ist optional und kann nur einen positiven Wert haben. Wenn der Wert 0 ist, bedeutet dies, dass der Schatten keinen Unschärfeeffekt hat. Je größer der Wert, desto unschärfer ist der Rand des Schattens.

5. Schattenausdehnungsradius: Dieser Parameter ist optional und sein Wert kann positiv oder negativ sein. Wenn er positiv ist, wird der gesamte Schatten verlängert und erweitert, andernfalls wird er verkleinert.

6. Schattenfarbe: Dieser Parameter ist optional. Wenn keine Farbe festgelegt ist, verwendet der Browser die Standardfarbe. Die Standardfarben verschiedener Browser sind jedoch unterschiedlich. Insbesondere die Browser Safari und Chrome unter dem WebKit-Kernel sind farblos, d. h. transparent. Es wird empfohlen, diesen Parameter nicht wegzulassen.

**Hinweis:** Bei mehreren Schattenebenen hat die innerste Ebene die höchste Priorität und die nachfolgenden Ebenen haben eine niedrigere Priorität. Trennen Sie sie durch Kommas ",".

2. Praktische Anwendung von Box-Shadow

Beispiel 1: Wenn Sie die X- und Y-Achse nicht festlegen und den Schattenunschärferadius auf 15 Pixel einstellen, wird der Effekt innerhalb des Radius und der Farbe wirksam.

Kastenschatten: 0 0 15px #f00;

Effektbild:

Beispiel 2: Stellen Sie die X-Achse und die Y-Achse auf positive Werte ein (positiver Wert: X-Achse zeigt nach rechts und Y-Achse zeigt nach unten)

Kastenschatten: 4px 4px 15px #f00;

Effektbild:

Beispiel 3: box-shadow: inset ist der innere Schatten von box-shadow. Es ist dasselbe wie oben, aber mit einem hinzugefügten Inset.

Box-Schatten: 0 0 15px #f00 Einschub;

Effektbild:

Beispiel 4: Stellen Sie die Farben der vier Seiten des Quadrats unterschiedlich ein, aber der Schattenunschärferadius beträgt 10px

box-shadow:-10px 0px 10px rot, / linker Schatten /

0px -10px 10px schwarz, / oben Schatten /

10px 0px 10px grün, / rechter Schatten /

0px 10px 10px blau;" / unterer Schatten / >

Effektbild:

Oben wird die Verwendung von Box-Shadow in CSS3 vorgestellt, außerdem die Verwendung von Box-Shadow: Eingefügter interner Schatten und die praktische Anwendung von Box-Shadow. Welcher Effekt um den Box-Shadow herum gesetzt wird, hängt von den jeweiligen Anforderungen ab.

Damit ist dieser Artikel mit den ausführlichen Beispielen zur Verwendung der Box-Shadow-Eigenschaft in CSS3 abgeschlossen. Weitere Informationen zur CSS3-Box-Shadow-Eigenschaft finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!