Einführung in die Verwendung von CSS3-Schatten

1. Randschatten

Standardsyntax:

Box-Shadow: h-Offset-V-Offset-Unschärfe-Spread-Farbe [Einschub],...

[partiell Der Verschiebungsbetrag nach unten rechts ist ein positiver Wert und der Wert nach oben links ist ein negativer Wert ]

a Wenn mehrere Schatten vorhanden sind, trennen Sie sie durch Kommas und stapeln Sie sie der Reihe nach nach unten erstes oben geschrieben

b Wenn ein Einschub vorhanden ist, handelt es sich um einen inneren Schatten. Beachten Sie jedoch: Wenn Sie einfach einen Einschub zum ursprünglichen Schatten hinzufügen, befindet sich der Schatten auf der gegenüberliegenden Seite , und es wird nicht einfach in die entgegengesetzte Richtung umgedreht.

c. Der größte Vorteil und Effekt der Erweiterung besteht darin, die Interferenz auf die verbleibenden drei Seiten abzuschirmen oder zu reduzieren.

d Wenn der DIV innerhalb des Elements gefüllt ist Mit Farbe wird der innere Schatten durch den farbigen Teil verdeckt, aber der innere farbige DIV kann auf relativ gesetzt werden und der Z-Index wird auf -1 gesetzt, um den blockierten inneren Schatten anzuzeigen.

[Diese Situation ist selten und weist viele Einschränkungen auf]

2. Textschatten

Standardsyntax:

text-shadow: h-offset v- Offset-Unschärfefarbe,...

[Der Offset ist nach rechts unten positiv und nach links oben negativ]

a Wenn mehrere Schatten vorhanden sind, trennen Sie sie durch Kommas und ordnen Sie sie Nach unten stapeln, wobei das Erste oben steht

Effekt 2: Apple Style-Effekt

.demo4 { color: #000;
text-shadow: 0 1px 1px #fff; }

Effekt 3: Photoshop-Prägeeffekt

.demo5 { color: #ccc;
text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;}

Effekt 4: Blurytext-Effekt

.demo6 { color: transparent;
text-shadow: 0 0 5px #f96;}

Effekt Sieben: 3D-Texteffekt

.demo10 { color: #fff;
text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248,0.8 ),3px 3px rgba(197, 223,

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung von CSS3-Schatten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!