So legen Sie den Randschatten in CSS fest

Das Box-Shadow-Attribut kann in CSS verwendet werden, um den Randschatten festzulegen; dieses Attribut fügt einen oder mehrere Schatten zum Rand hinzu und kann die Pixellänge, die Breite, den Unschärfeabstand und die Farbe des Schattens festlegen -shadow:h-Shadow V-Shadow Blur Spread Color Inset“.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

In CSS können wir den Rahmenschatten über die Box-Shadow-Eigenschaft festlegen und den Schatten auf das Textfeld anwenden. Diese Eigenschaft legt die Pixellänge, -breite und den Unschärfeabstand des Schattens sowie die Farbe des Schattens fest. Die Eigenschaft „box-shadow“ kann der Box einen oder mehrere Schatten hinzufügen. Diese Eigenschaft ist eine durch Kommas getrennte Liste von Schatten, die jeweils durch 2–4 Längenwerte, einen optionalen Farbwert und das optionale Schlüsselwort „inset“ angegeben werden. Der Wert für die ausgelassene Länge ist 0.

Syntax:

box-shadow: h-shadow v-shadow blur spread color inset;

Attributwert:

h-Shadow: Bezieht sich auf den horizontalen Versatz des Schattens, sein Wert kann positiv oder negativ sein, positiver Wert, der Schatten befindet sich auf der rechten Seite des Objekts, negativer Wert, der Schatten befindet sich auf der rechten Seite des Objekts. Links
V-Schatten: bezieht sich auf den vertikalen Versatz des Schattens. Sein Wert kann auch positiv oder negativ sein. Bei positiven Werten befindet sich der Schatten am unteren Rand des Objekts . Bei negativen Werten befindet sich der Schatten am oberen Rand des Objekts.
Unschärferadius: Dieser Parameter ist optional und kann nur positiv sein Unschärfeeffekt. Je größer der Wert, desto unschärfer wird der Schattenrand.
Spread: Dieser Parameter ist optional und sein Wert kann positiv oder negativ sein Erweitert, andernfalls wird er reduziert.
Farbe: Dieser Parameter ist optional. Wenn keine Farbe festgelegt ist, wird die Standardfarbe verwendet, aber die Standardfarbe jedes Browsers ist unterschiedlich Safari- und Chrome-Browser unter dem Webkit-Kernel sind farblos, also transparent. Es wird empfohlen, diesen Parameter nicht wegzulassen. kann weggelassen werden.
Hinweis: **Bei mehreren Schattenebenen hat die innerste Ebene die höchste Priorität und nimmt dann nacheinander ab.
Praktische Anwendung von Box-Shadow

Beispiel 1Stellen Sie nicht die Farbe

box-shadow: 0 0 15px #f00;

Beispiel 2

Setzen Sie die Die Seiten des Quadrats sollen unterschiedliche Farben haben, aber der Schattenunschärferadius beträgt 10 Pixel

Das obige ist der detaillierte Inhalt vonSo legen Sie den Randschatten in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!