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

Verwenden Sie CSS-Variablen, um coole und erstaunliche Schwebeeffekte zu erzielen

Kürzlich habe ich auf der Grover-Website eine lus...

Implementierung des React-Konfigurations-Subroutings

1. Die Komponente First.js hat Unterkomponenten: ...

Vue implementiert horizontales Scrollen von Text im Laufschriftstil

In diesem Artikel wird der spezifische Code für V...

Detaillierte Erklärung der MySql-Installation und des Logins

Überprüfen Sie, ob MySQL bereits unter Linux inst...

IE6-Verzerrungsproblem

Frage: <input type="hidden" name=&qu...

JavaScript, um das Bild mit der Maus zu bewegen

In diesem Artikel wird der spezifische JavaScript...

Erste Schritte mit GDB unter Linux

Vorwort gdb ist ein sehr nützliches Debugging-Too...

Optimierung der Web-Frontend-Leistung

Best Practices für die Web-Frontend-Optimierung: ...

Verwenden Sie JavaScript, um Seiteneffekte zu erstellen

11. Verwenden Sie JavaScript, um Seiteneffekte zu...

Detailliertes Beispiel der MySQL curdate()-Funktion

Einführung in die MySQL CURDATE-Funktion Bei Verw...