Detaillierte Erklärung der CSS3-Textschatteneigenschaft Textschatten

Detaillierte Erklärung der CSS3-Textschatteneigenschaft Textschatten

Textschatten-Textschatten-Eigenschaftseffekte:

1. Schatten der unteren rechten Ecke, Schatten der unteren linken Ecke, Schatten der oberen linken Ecke, Schatten der oberen rechten Ecke

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!DOCTYPE html >   
  2. < html   lang = "en" >   
  3. <Kopf>   
  4.      < Meta   Zeichensatz = "UTF-8" >   
  5.      <Titel> Textschatten </Titel>   
  6.      < Stil >   
  7. P{
  8. Textausrichtung: zentriert;
  9. Rand: 0;
  10. Schriftfamilie: Helvetica, Arial, Sans-Serif;
  11. Farbe: Nr. 999;
  12. Schriftgröße: 80px;
  13. Schriftstärke: fett;
  14. Textschatten: 10px 10px #333;
  15. }
  16.      </ Stil >   
  17. </ Kopf >   
  18. < Textkörper >   
  19.      < p > Textschatten </ p >   
  20. </ Körper >   
  21. </ html >   

Der Texteffekt ist:

Wenn Sie Textschatten in „text-shadow:-10px 10px #333“ ändern, erscheint in der unteren linken Ecke ein Schatten.

Ändern Sie den Textschatten in: text-shadow:-10px -10px #333 und in der oberen linken Ecke wird ein Schatten angezeigt.

Ändern Sie den Textschatten in: Textschatten: 10px -10px #333, und in der oberen rechten Ecke wird ein Schatten angezeigt.

2. Verwenden Sie Textschatten, um einen 3D-Texteffekt zu erstellen

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!DOCTYPE html >   
  2.   < html   lang = "en" >   
  3.   <Kopf>   
  4.       < Meta   Zeichensatz = "UTF-8" >   
  5.       <Titel> Textschatten </Titel>   
  6.       < Stil >   
  7. P{
  8. Textausrichtung: zentriert;
  9. Rand: 0;
  10. Schriftfamilie: Helvetica, Arial, Sans-Serif;
  11. Farbe: Nr. 999;
  12. Schriftgröße: 80px;
  13. Schriftstärke: fett;
  14. Textschatten: -1px -1px #fff,
  15. 1px 1px #333;
  16. }
  17.       </ Stil >   
  18.   </ Kopf >   
  19.   < Textkörper >   
  20.       < p > Textschatten </ p >   
  21.   </ Körper >   
  22.   </ html >   

Die obige ausführliche Erklärung der Textschatteneigenschaft von CSS3-Text ist der gesamte Inhalt, den der Editor mit Ihnen teilt. Ich hoffe, es kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden.

<<:  Der Prozess des Aufbaus einer Lampenarchitektur durch einen Docker-Container

>>:  Die heißesten Trends im Webdesign UI im Jahr 2013 Die beliebtesten UI-Designs

Artikel empfehlen

So verwenden Sie CSS-Overflow: Hidden (Überlauf ausblenden und Floats löschen)

Überlauf ausblenden Damit ist gemeint, dass Text-...

Detaillierte Erklärung der MySQL Truncate-Verwendung

Inhaltsverzeichnis MySQL Truncate-Verwendung 1. T...

Der Prozess der schnellen Konvertierung eines MySQL-Left-Joins in einen Inner-Join

Während des täglichen Optimierungsprozesses stell...

Schritte zur VSCode-Konfiguration mit der Git-Methode

Git ist in vscode integriert und viele Vorgänge k...

Sechs Möglichkeiten, die Größe von Docker-Images zu reduzieren

Seitdem ich 2017 mit der Arbeit an Vulhub begonne...

Grafisches Tutorial zur Installation von MySQL 5.5 unter Win7

Die MySQL-Installation ist relativ einfach. Norma...

Einige Vorschläge zur Linux-Systemoptimierung (Kerneloptimierung)

Swap deaktivieren Wenn auf dem Server ein Datenba...

Reines CSS, um coole Neonlichteffekte zu erzielen (mit Demo)

Ich habe kürzlich die Tutorial-Reihe zu CSS-Anima...

JavaScript implementiert die Verarbeitung großer Datei-Uploads

Beim Hochladen von Dateien, z. B. Videodateien, d...

Tomcat-Quellcodeanalyse und -Verarbeitung

Inhaltsverzeichnis Vorwort 1. Endpunkt 2. Verbind...