Zusammenfassung von 6 Möglichkeiten zur Verwendung von CSS3-Schatten

Heute werden wir hauptsächlich die Verwendung von CSS3-Schatten besprechen. Im Folgenden stellt Ihnen der Herausgeber einen Artikel vor, der Ihnen beim Beherrschen von CSS3-Schattentipps hilft (vom Herausgeber empfohlen). Der Herausgeber findet es ziemlich gut, deshalb teile ich es jetzt mit Ihnen und gebe es als Referenz. Folgen wir dem Herausgeber und werfen wir einen Blick darauf.

1. CSS3-Textschatten – Text-Schatten

Vor einiger Zeit haben wir drei neue Funktionen aussortiert: Farbverlauf, Transparenz RGBA und Boxradius in CSS3 Die Verwendung von Attributen habe ich einige Male weiter geklärt, um die Verwendung von Textschatten in CSS3 zu klären. Ich habe mir etwas Zeit genommen, dies heute zu posten, um diese neue Anwendung mit Freunden zu teilen, die das gleiche Hobby teilen.

2. Fassen Sie die Methoden und Techniken zur Verwendung des CSS3-Schatteneffekts zusammen

Es gibt viele Effekte, die CSS3 heute erzielen kann fasst die Methoden und Techniken zur Verwendung von CSS3 zum Erzielen von Schatteneffekten zusammen:

Wenn es mehrere Schatten gibt, trennen Sie diese durch Kommas und stapeln Sie sie der Reihe nach nach unten, wobei der erste oben steht

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

3. Detaillierte Erläuterung von abgerundeten Ecken und Schatten, Rahmenbildern und Boxverkleinerung in CSS3

Ein Wertesatz ist die Horizontale und die vertikalen Radien der vier Ecken der Box können für jede Ecke individuell eingestellt werden. Die Reihenfolge der Werte ist: oben links, oben rechts, oben rechts, unten rechts, unten links Das Gleiche wie Polsterung und Rand. Die Einheiten unterstützen Pixel und Prozentsätze (siehe Breite und Höhe)

Sie können den horizontalen Radius/vertikalen Radius verwenden, um den Radius individuell zu steuern, und jeder Radius kann unabhängig gesteuert werden

4. CSS3 abgerundete Ecken, Schatten, Transparenz_html /css_WEB-ITnose

Es gibt viele Möglichkeiten, abgerundete Ecken, Schatten und Transparenz in CSS zu erreichen. Die herkömmlichen Methoden sind komplizierter. Es ist viel bequemer, CSS3 zu verwenden, obwohl die Unterstützung für CSS3 noch nicht von verschiedenen Browsern unterstützt wird.

Zusammenfassung der Verwendung und Techniken von CSS3 Shadow box-shadow

text-shadow fügt dem Text einen Schatteneffekt hinzu, und box-shadow fügt dem Elementblock einen umgebenden Schatteneffekt hinzu . Mit der Popularität von HTML5 und CSS3 wird dieser Spezialeffekt immer häufiger eingesetzt.

Die Grundsyntax ist {box-shadow:[inset] x-offset y-offset Blur-Radius Spread-Radiuscolor.🎜>

Objektauswahl {box-shadow:[Projektionsmethode] X- Achsenversatz Y-Achsenversatz Schattenunschärferadius Schatten erweiterter Radius Schattenfarbe🎜>

6. Einführung in die Verwendung von CSS3-Schatten

Standardsyntax:

Box-Shadow: h-Offset v-Offset Blur Spread Color [ Einfügung ] ,...

[ Offset nach rechts unten ist ein positiver Wert , 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, wobei der erste oben steht

b. Wenn ein Einschub vorhanden ist, dann „Im Schatten“, aber seien Sie vorsichtig: Wenn Sie einfach einen Einschub zum ursprünglichen Schatten hinzufügen, befindet sich der Schatten auf der gegenüberliegenden Seite und wird nicht einfach in die entgegengesetzte Richtung gedreht.

Verwandte Fragen und Antworten

PHP – iOS CSS3 Shadow kann nicht verwendet werden

[Verwandte Empfehlungen]

1.

Fassen Sie die Methoden zum Erzielen verschiedener Effekte mit CSS-Rändern zusammen

Das obige ist der detaillierte Inhalt vonZusammenfassung von 6 Möglichkeiten zur Verwendung von CSS3-Schatten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!