CSS3-Box-Shadow-Schattengrafik-Tutorial

In diesem Artikel wird hauptsächlich der CSS3-Box-Shadow-Schatten (äußerer Schatten und äußerer Glanz) vorgestellt. Die Bilder zeigen die unterschiedlichen Auswirkungen des Schattens in verschiedenen Positionen

Grundlegende Beschreibung:

Äußerer Schatten: Box-Shadow: X-Achse Y-Achse Rpx-Farbe;

Attributbeschreibung (entsprechende Reihenfolge) : Schatten-X-Achse (negative Werte können verwendet werden) Schatten-Y-Achse (negative Werte können verwendet werden) Schattenunschärfewert (Größe) Schattenfarbe

Innerer Schatten: Box-Shadow: X-Achse Y-Achse Rpx-Farbeinschub;

Standard ist äußerer Schatten. Innerer Schatten: Einschub kann auf inneren Schatten eingestellt werden.

Hinweis (PS): Dieses Attribut wird in Boxmodellen wie (p,p,h1 verwendet ,h2,h3,h4,h5, h6 usw.) wird nicht zum Festlegen des Textschattens verwendet. Wenn Sie den Textschatten festlegen, lesen Sie bitte den Wissenspunkt: text-shadow (gleicher Grund)

Da es sich um ein neues Attribut handelt, müssen wir den Namen des Attributs eingeben, um mit den wichtigsten Browsern kompatibel zu sein und die größeren Versionen dieser großen Browser zu unterstützen. In der unteren Version müssen wir bei Verwendung des Box-Shadow-Attributs in Mainstream-Browsern den Namen des Attributs eingeben die Form von -webkit-box-shadow. Der Firefox-Browser muss in der Form -moz-box-shadow geschrieben werden. Öffnen Sie den Browser -o-box-shadow   IE>9 -ms-box-shadow   

Grundübungen:

Um die Eigenschaften von Box-Shadow besser zu verstehen, führen Sie ein paar kleine Tests durch: (Um Stile bequemer direkt in Tags zu verschachteln)

Test 1:

box-shadow: 0 0 10px #f00 (Da die X-Achse und die Y-Achse nicht verschoben werden, wirkt sich der Einstellungswert auf aus der Radiusbereich, Farbe)

Test 2:

< /p> box-shadow:4px 4px 10px #f00; Anders als bei Test 1 haben die X-Achse und die Y-Achse den positiven Wert geändert (der positive Wert geht nach rechts und unten), sodass es so aussieht‍

Test 3:

-4px -4px 10px #f00; Anders als bei Test 2 Der Unterschied besteht darin, dass sich die X-Achse und die Y-Achse in negative Werte geändert haben (negative Werte gehen nach links und oben), also sieht es so aus‍

Ebenso: Sie können den nächsten positiven Wert testen, die Wirkung eines negativen Werts wird hier nicht getestet. . . . . . . .

Test 4:

Test 5: --innershadow

box-shadow: 0px 0px 10px roter Einschub; Der einzige Unterschied ist das Hinzufügen eines Einschubs. Die anderen Attribute sind die gleichen wie beim Äußeren Sobald Sie es verstanden haben, kennen Sie das Prinzip und können es nach Belieben umschreiben. Mit dem Animationseffekt von CSS3 ist die Flash-Ebene (Wort) sehr einfach zu implementieren. . Hoffe es hilft. .

Das obige ist der detaillierte Inhalt vonCSS3-Box-Shadow-Schattengrafik-Tutorial. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!