Tutorial zur Verwendung der CSS3-Eigenschaft box-shadow

Mit der Box-Shadow-Eigenschaft von CSS3 können wir auf einfache Weise Ebenenschatteneffekte erzielen. Lassen Sie uns dieses Attribut in der Praxis im Detail erklären.

1. Browserkompatibilität des Box-Shadow-Attributs schauen wir uns zunächst die Browserkompatibilität dieses Attributs an:

Opera: Ich weiß nicht, welche Version unterstützt wird. Als ich diesen Artikel zum Testen gepostet habe, habe ich Opera gerade auf die neueste Version 10.53 aktualisiert, die das Box-Shadow-Attribut bereits unterstützt.
Firefox unterstützt dies über die private Eigenschaft -moz-Box-Shadow.
Safari und Chrome unterstützen dies über die private Immobilie -webkit-Box-Shadow.
Wird nicht von allen IEs unterstützt (ich weiß nicht, ob sich IE9 verbessert hat). Keine Sorge, wir werden am Ende des Artikels einige Hacks für den IE vorstellen.
2. Syntax des Box-Shadow-Attributs
box-shadow hat sechs einstellbare Werte:

img{box-shadow: Schattentyp X-Achsen-Verschiebung Y-Achsen-Verschiebung Schattengröße Schattenerweiterung Schattenfarbe}

Wenn kein Schattentyp festgelegt ist, ist der Standardwert der Schatteneffekt. Bei der Einstellung „Inset“ handelt es sich um einen inneren Schatteneffekt.
X-Achsen- und Y-Achsen-Verschiebung sind nicht gleichwertig, ähneln aber „Winkel“ und „Position“ in Photoshop.
Schattengröße, -erweiterung und -farbe sind die gleichen wie in Photoshop.
A.

Bitte beachten Sie: Um Ärger zu sparen, ist nur Box-Shadow im CSS-Code unten geschrieben. Was Sie tun müssen, ist ganz einfach: Kopieren Sie zwei Box-Shadows und fügen Sie -moz- und -webkit- davor ein.

img {
-moz-box-shadow: 2px 2px 10px #06c;
-Webkit-box-shadow: 2px 2px 10px #06c;
Box-Shadow: 2px 2px 10px #06c;
}

(1).
IMG {Box-Shadow: 0 0 10px #06c;}

Der Farbwert hier ist der HEX -Wert.

IMG {Box-Shadow: 0 0 10px RGBA (0, 255, 0, .5)}
(2).
Img {box-shadow: 0 0 10px 20px #06c;}

(3).
IMG {Box-Shadow: Einschub 0 0 10px #06c;}

(4)
Box-Shadow kann mehrmals gleichzeitig verwendet werden.

IMG {Box-Shadow: -10px 0 10px rot, Box-Shadow: 10px 0 10px blau, box-shadow: 0 -10px 10px gelb, box-shadow: 0 10px 10px grün}

(5). Zum Beispiel schreiben wir im folgenden Code zuerst einen 10px -grünen Schatten und dann eine 10px -Größe, aber um 20px Schatten erweitert. Das Ergebnis ist: Eine grüne schattierte Schicht auf einer gelben schattierten Schicht.

IMG {Box-Shadow: 0 0 10px grün; Box-Shadow: 0 0 10px 20px gelb}

Aber wenn wir die Reihenfolge wie diese ändern:

IMG {Box-Shadow: 0 0 10px 20px gelb, Box-Shadow: 0 0 10px grün;}

Wir werden nicht in der Lage sein, die später schattige Schicht zu sehen, die später geschrieben wurde, da sie von der gelben Schicht zuerst und mit einem größeren Radius bedeckt ist.

4. Lassen Sie den IE auch Box-Shadow unterstützen
IE selbst verwendet einen Schattenfilter, um ähnliche Effekte zu erzielen, und es gibt auch einige JS- und .htc -Hackdateien, die Ihnen helfen können, diesen Effekt im IE zu erzielen. Ich kann sie nicht alle ausprobieren, also stelle ich hier nur die vor, die ich verwendet habe.

IE-CSS3.HTC ist eine HTC-Datei, mit der der IE-Browser einige CSS3-Eigenschaften, nicht nur Box-Shadow, unterstützt, sondern auch Ihrem IE-Browser den abgerundeten Eckattribut Border-Radius und Text-Shadow-Attribut-Attribut-Attribut-Shadow unterstützt.

So verwenden Sie es: Laden Sie es herunter und legen Sie es in Ihr Server -Verzeichnis ein

Schreiben Sie den folgenden Code in Ihren :

Geben Sie im blauen Teil den Selektor mit dem Box-Shadow-Attribut ein und geben Sie im grünen Teil den absoluten Pfad oder den relativen Pfad von IE-CSS3 ein.

Dann ist es in Ordnung. Aber es gibt noch ein paar Dinge zu beachten:

Wenn Sie diese HTC-Datei verwenden, so lange wie Box-Shadow, -moz-Box-Shadow oder -Webkit-Box-Shadow in Ihrem CSS geschrieben ist, wird sie in Ihrem CSS geschrieben.
Wenn Sie diese HTC-Datei verwenden, können Sie keine Box-Shadow schreiben: 0 0 10px rot;
Alpha -Transparenz in RGBA -Werten wird nicht unterstützt.
Inset Innenschatten werden nicht unterstützt.
Die Schattenerweiterung wird nicht unterstützt.
Schatten erscheinen nur schwarz im IE, egal welche anderen Farben Sie auf sie einstellen.
Mit diesem Skript kann der IE nur einige Box-Shadow-Werte unterstützen. Wenn Sie andere bessere IE -Hacks -Skripte haben, überlassen Sie bitte eine Nachricht zum Teilen.