Ausführliche Erklärung zur Verwendung des Box-Shadow-Attributs in CSS3

Jedes Mal, wenn Sie Box-Shadow verwenden, müssen Sie die Informationen überprüfen, um den entsprechenden Effekt zu erzielen. Fassen wir sie jetzt zusammen, damit Sie sie später leichter nachschlagen können.

1. Grammatik:

E {box-shadow: inset x-offset y-offset blur-radius spread-radius color};
E {box-shadow: Projektionsmethode:

1. Schattentyp: Dieser Parameter ist optional. Die Standardprojektionsmethode ist äußerer Schatten äußerer Schatten wird in inneren Schatten umgewandelt;

2. Y-Versatz: bezieht sich auf den vertikalen Versatz des Schattens. Bei positiven Werten liegt der Schatten am unteren Rand Das Objekt. Bei negativen Werten befindet sich der Schatten am oberen Rand des Objekts.

4. Schattenunschärferadius: Dieser Parameter ist optional und kann nur positiv sein hat keinen Unschärfeeffekt. Je größer der Wert, desto unschärfer wird der Rand des Schattens. 5. Schattenausdehnungsradius: Dieser Parameter ist optional und sein Wert kann positiv oder negativ sein , der gesamte Schatten wird erweitert, andernfalls wird er verkleinert

6. Schattenfarbe: Dieser Parameter ist optional. Wenn keine Farbe festgelegt ist, verwendet der Browser die Standardfarbe, jedoch jeweils die Standardfarbe Der Browser ist anders, insbesondere die Safari- und Chrome-Browser unter dem Webkit-Kernel sind farblos, dh transparent. Es wird empfohlen, diesen Parameter nicht wegzulassen.

3. So schreiben Sie

kompatible Browser

:

Wie text-shadow kann box-shadow eine oder mehrere Projektionen verwenden. Wenn mehrere Projektionen verwendet werden, müssen diese durch Kommas getrennt werden.

4.

IE-Filter simuliert Box-Shadow-Schatteneffekt

Grundlegende Syntax: filter:progid:DXImageTransform.Microsoft.Shadow(color='color value', Direction = Schattenwinkel (numerischer Wert), Stärke = Schattenradius (numerischer Wert));

<span style="color: #800000;"><span style="color: #000000;">//Firefox4.0-</span><br/><span style="color: #ff6600;">-moz-box-shadow:</span> <span style="color: #000000;">投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;</span><br/><span style="color: #000000;">//Safari and Google chrome10.0-</span><br/><span style="color: #ff6600;">-webkit-box-shadow:</span> <span style="color: #000000;">投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;</span><br/><span style="color: #000000;">//Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9</span><br/><span style="color: #ff6600;">box-shadow:</span>  <span style="color: #000000;">投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;</span></span>

Hinweis

:

1. Dieser Filter muss zusammen mit dem Hintergrundattribut verwendet werden. andernfalls ist der Filter ungültig; 2. Die Farbattribute im Filter müssen vollständig geschrieben werden und Abkürzungen können nicht verwendet werden

3. Der Schatten des Filters wird innerhalb der Breite und Höhe berechnet; 4. Unter dem Feldschatten fügt das Feld automatisch overflow:hidden hinzu.

Häufig verwendete Schattenimplementierungscodes

:

Sehen Sie sich die spezifischen Effekte im Bild unten an:

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung des Box-Shadow-Attributs in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!