Heim  >  Artikel  >  Web-Frontend  >  Einstellungen für Textaushöhlung, Transparenz und Schatteneffekte in CSS3

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

不言
不言Original
2018-06-14 17:15:365073Durchsuche

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

201637105111410.png (752×75)

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
201637105151945.png (609×90)

Code

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

Effekt 2

201637105229256.png (620×72)

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
201637105301417.png (622×53)

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

201637105352727.png (596×46)

Mehrere Schatten:
Code

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

Wirkung
201637105420741.png (578×52)

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn