Detaillierte HTML5-Übungseinführung in verschiedene Eigenschaften text-shadow, box-shadow und border-radius in CSS3

Heute ist unser Inhalt eine Einführung in die Eigenschaften text-shadow, box-shadow und border-radius von CSS3. Sie können das Seitenlayout verbessern und sind es wert, erlernt zu werden.

RGBA

Die ersten drei Werte kodieren jeweils den Wert von RBG, und der letzte Wert stellt Transparenz dar (0 bedeutet transparent, 1 bedeutet undurchsichtig).

RGBA kann für alle farbbezogenen Attribute verwendet werden, wie z. B. Schriftfarbe, Rahmenfarbe, Hintergrundfarbe, Schattenfarbe usw.

Textschatten

Die Struktur des Textschattens ist in dieser Reihenfolge: x-Versatz, y-Versatz, Unschärfe und Farbe .

Wenn Sie einen negativen Wert für den X-Versatz festlegen, ändert sich die Schattenposition nach links, und wenn Sie einen negativen Wert für den Y-Versatz festlegen, ändert sich die Schattenposition zum Kopf hin. Wir können RBGA auch verwenden, um die Farbe des Schattens festzulegen.

Sie können eine Gruppe von durch Kommas getrennten Textschatten festlegen. Im folgenden Beispiel werden zwei Textschatten (oben 1 Pixel und unten 1 Pixel) verwendet, um einen Nachrichtentexteffekt für den Namen festzulegen.

text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;

Randradius

Die bequeme Art, Attributzuweisungen mit Randradius zu schreiben, ähnelt padding und margin (zum Beispiel: border-radius: 20px). Damit einige Browser den Effekt korrekt darstellen, müssen Sie vor dem Attribut ein Präfix hinzufügen. Beispielsweise muss der Webkit-Browser das Präfix „-webkit-“ und der Firefox-Browser das Präfix „" Präfix. -moz-

Sie können unterschiedliche Radien für verschiedene Ecken festlegen. Beachten Sie, dass Webkit- und Firefox-Browser für jede Ecke unterschiedliche Attributnamen haben.

　

Box-Schatten

Die Struktur des Box-Schattens ist dieselbe wie die

-Attribute , in dieser Reihenfolge: x-Offset, y-Offset, Unschärfe und Farbe. text-shadow

Sie können viele Effekte für den Boxschatten festlegen. Im folgenden Beispiel wird beispielsweise eine Reihe von Parametern verwendet, um den Effekt festzulegen (Parameter werden durch Kommas getrennt).

-moz-box-shadow: 
-2px -2px 0 #fff, 
2px 2px 0 #bb9595, 
2px 4px 15px rgba(0, 0, 0, .3);

Das obige ist der detaillierte Inhalt vonDetaillierte HTML5-Übungseinführung in verschiedene Eigenschaften text-shadow, box-shadow und border-radius in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!