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

Shtml Kurzanleitung

Shtml und asp sind ähnlich. In Dateien mit dem Nam...

Detaillierte Erläuterung zum automatischen Aktualisieren der Seite und zur Aktualisierungsmethode nach dem Löschen von Vue-Listendaten

Problembeschreibung: Nachdem das Front-End Daten ...

So verwenden Sie Docker-Compsoe zum Bereitstellen eines Projekts mit Front-End- und Back-End-Trennung

Sag es im Voraus Wir alle wissen, dass Docker ein...

Vue implementiert das Ziehen und Sortieren von Bildern

In diesem Artikelbeispiel wird der spezifische Co...

MySQL 8.0.15 Installations-Tutorial für Windows 64-Bit

Gehen Sie zunächst zum Herunterladen auf die offi...

MySQL-Grundlagen in 1 Stunde

Inhaltsverzeichnis Erste Schritte mit MySQL MySQL...

So erstellen Sie schnell zig Millionen Testdaten in MySQL

Bemerkung: Die Datenmenge in diesem Artikel beträ...

Das Docker-Maven-Plugin-Plugin kann das entsprechende JAR-Paket nicht abrufen

Bei Verwendung des Plug-Ins „Docker-Maven-Plugin“...

Vant+postcss-pxtorem implementiert Browser-Anpassungsfunktion

Rem-Layout-Anpassung Die Stile in Vant verwenden ...

So führen Sie nach der Kompilierung und Installation von Nginx ein reibungsloses Upgrade durch

Wenn Sie nach der Kompilierung und Installation v...

Konfigurationsmethode für die Mehrfachauswahlfunktion von React Mouse

Im Allgemeinen verfügen Listen über Auswahlfunkti...

Zusammenfassung der mathematischen Symbole in Unicode

In der Mathematik, Physik und einigen wissenschaf...

Detaillierte Erklärung der Vue-Komponenten

<Text> <div id="Wurzel"> &l...

Ein Fehler wurde behoben, der dadurch verursacht wurde, dass die Bildlaufleiste Platz einnahm

Hintergrund Dieser Fehler wurde dadurch verursach...

Div überschreitet den versteckten Text und versteckt den CSS-Code jenseits des Div-Teils

Vor dem Verstecken: Nach dem Verstecken: CSS: Code...