Heim > Artikel > Web-Frontend > 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
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!