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.
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
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 stehtb. 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 AntwortenPHP – iOS CSS3 Shadow kann nicht verwendet werden
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!