Drei kleine Spezialeffekte, die leicht zu meistern sind: Textaushöhlung, Transparenz und Schatteneffekte

In diesem Artikel wird hauptsächlich eine Zusammenfassung von Beispielen für Textaushöhlung, Transparenzwert und 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

CSS-CodeInhalt in die Zwischenablage kopieren

1. -webkit-text-fill-color:transparent;

2. -webkit -text-Stroke:1px #000; -Stroke-Color-Transparenzwert macht Text weicher:

Code

CSS-Code

Inhalt in die Zwischenablage kopieren

Hintergrundbild:-webkit-linear-gradient(#eee, #000

);

1. -webkit-hintergrund-clip:text; 🎜>-webkit-text-fill-

   color
:
2. transparent

   ; Inhalt in die Zwischenablage kopieren

3. Hintergrundbild

   :-webkit-linear-gradient(#eee,#000); >

   -webkit-text-fill-
Farbe

:

transparent
;

-webkit-text-Stroke:

1px transparent;

Effekt 2

1. Im Vergleich werden Sie feststellen, dass der Text in Effekt 2 klarer ist als der in Effekt 1. WeicherTextschatten

   Syntax:

2. CSS-CodeInhalt in die Zwischenablage kopieren

3. Feld -reflect:

   none |. [ {2,3} && <color> ][ , < ;length>{2,3} && <Farbe

   > >Inhalt in die Zwischenablage kopieren

4. text-shadow:

   2px

2px

0
#000 ;

Effekt

text-shadow hat 3 Längenparameter, der erste stellt den horizontalen Versatz dar, der zweite stellt den vertikalen Versatz dar , und der dritte stellt Unschärfe dar (optional)

Weicherer Textschatten: CodeCSS-Code

Inhalt in die Zwischenablage kopieren

1. Textschatten:1px

1px

5px

#000

; CodeCSS-Code

Inhalt in die Zwischenablage kopieren

1. text-shadow:1px 1px

   5px

#000

;

Wirkung

Das obige ist der detaillierte Inhalt vonDrei kleine Spezialeffekte, die leicht zu meistern sind: Textaushöhlung, Transparenz und Schatteneffekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!