Einstellungen für Textaushöhlung, Transparenz und Schatteneffekte in CSS3

In diesem Artikel wird hauptsächlich eine Zusammenfassung von Beispielen für die Textaushöhlung, den Transparenzwert und die Schatteneffekteinstellungen in CSS vorgestellt. Durch Festlegen des Textstrich-Farbtransparenzwerts können sich bedürftige Freunde darauf beziehen . Erstellen Sie leeren Text unter

text-fill-color:
Code

-webkit-text-fill-color:transparent;   
-webkit-text-stroke:1px #000;

Effect

Text-Stroke-Color-Transparenzwert macht den Text weicher:
Code

background-image:-webkit-linear-gradient(#eee,#000);   
-webkit-background-clip:text;   
-webkit-text-fill-color:transparent;

Effekt 1

Code

background-image:-webkit-linear-gradient(#eee,#000);   
-webkit-background-clip:text;   
-webkit-text-fill-color:transparent;   
-webkit-text-stroke:1px transparent;

Effekt 2

Im Vergleich dazu werden Sie feststellen, dass der Text in Effekt 2 etwas weicher ist als Effekt 1

Text -shadow
Syntax:

box-reflect：none | [ <length>{2,3} && <color>? ][ , <length>{2,3} && <color>? ]*

Lassen Sie uns ein schattiertes Textbeispiel implementieren:
Code

text-shadow:2px 2px 0 #000;

Effekt

text- Schatten hat 3 Längenparameter, der erste steht für den horizontalen Versatz, der zweite für den vertikalen Versatz und der dritte für die Unschärfe (optional).
Weicherer Textschatten:
Code

text-shadow:1px 1px 5px #000;

Effekt

Mehrere Schatten:
Code

text-shadow:1px 1px 5px #000;

Wirkung

Das ist alles Der gesamte Inhalt dieses Artikels ist erwünscht Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Verwenden von CSS3 zum Zeichnen grundlegender Grafiken

Die Verwendung von CSS3-Ebenenschatten und Textschatten

So verwenden Sie CSS, um das Hintergrundbild zu strecken und zu füllen, um eine wiederholte Anzeige zu vermeiden

Das obige ist der detaillierte Inhalt vonEinstellungen für Textaushöhlung, Transparenz und Schatteneffekte in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!