Verwenden Sie HTML5 und CSS, um einen Textschatteneffekt zu erzielen

Vor zwei Tagen fragte mich ein hübsches Mädchen, das HTML5-Frontend lernte, wie man den Textschatteneffekt erzielen könne. Sie erzählte mir von Text-Shadow, aber sie konnte es nicht so aussehen lassen, wie sie es wollte. Tatsächlich sind die neuen Funktionen von CSS3 sehr leistungsfähig. Okay, Klatsch und Tratsch, werfen wir zunächst einen Blick auf diesen Textschatten.

text-shadow Textschattenparameter: Parameter 1: Der erste Längenwert wird verwendet, um den horizontalen Versatzwert des Objektschattens festzulegen. Kann negativ sein. Parameter 2: Der zweite Längenwert wird verwendet, um den vertikalen Versatzwert des Objektschattens festzulegen. Kann negativ sein. Parameter 3: Wenn der dritte Längenwert angegeben wird, wird er zum Festlegen des Schattenunschärfewerts des Objekts verwendet. Negative Werte sind nicht zulässig. Parameter 4: Legen Sie die Farbe des Objektschattens fest

Textschatten: 10px 10px 50px #000;

Wie erreichen wir den Effekt im Bild oben?

HTML-Struktur CSS-Stil Schriftart Schriftfarbe Textschatten Schauen wir uns dann den spezifischen Code an:

HTML:

 <div class=text>[Tausende Temperamente] Shang Xuetang</div>

CSS:

 .text{ Schriftart: fett 100px/1,5 'Microsoft Yahei'; Farbe: dodgerblue;/*text-shadow*/ text-shadow: 10px 10px 50px #000; /*text-shadow: 10px 10px 50px #000,-10px - 10px 50px #f00;*/}

Schauen wir uns nun an, wie man den Effekt der kleinen Schönheit erzielt, die mich am vorderen Ende fragt.

Es ist eigentlich ganz einfach, gehen wir direkt zum Code ~

HTML:

 <div class=text>[Tausende Temperamente] Shang Xuetang</div>

CSS:

 body { Hintergrund: #000; Farbe: #fff;}.text{ Schriftart: fett 100px/1,5 georgia, serifenlos;/*Verschiedene Farben, Unschärfegrößen mehrerer verschiedener Werte*/ Textschatten: 0 0 10px #fff , 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;}

Verbreiten Sie Ihr Denken. Tatsächlich sind CSS3-Stile sehr interessant. Manchmal können nur kleine Änderungen sehr coole Effekte erzielen.^

Das Obige ist die Einführung des Herausgebers in die Verwendung von HTML5 und CSS zum Erzielen von Textschatteneffekten. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!