Heim > Artikel > Web-Frontend > So erzielen Sie mit CSS3 einen Einzelschatteneffekt und einen Mehrfachschatteneffekt für Text (vollständiger Code im Anhang)
So erzielen Sie mit CSS3 einen Einzelschatteneffekt und einen Mehrfachschatteneffekt für Text (vollständiger Code im Anhang)
- 坏嘻嘻Original
- 2018-09-28 11:54:084904Durchsuche
In den letzten Jahren wurde bei der Entwicklung von Webseiten immer mehr Wert auf die Mensch-Computer-Interaktion und das Benutzererlebnis gelegt. Nicht nur die Farben sind vielfältiger, sondern auch die verschiedenen Spezialeffekte sind schwindelerregend. Heute werde ich Ihnen hauptsächlich vorstellen, wie Sie den besonderen Effekt von Schatten im Text erzielen können. Ich hoffe, dass es für Freunde hilfreich ist.
Das Prinzip der Verwendung von CSS3 zum Erzielen eines Textschatteneffekts
Um einen Schatteneffekt zu erzielen, verwenden wir laut W3C-Standards: Wenn wir mit dem CSS3-Shadow-Attribut unter IE kompatibel sein möchten, können Sie ie.css3-htc verwenden. Gemäß dem Standard unterstützen Internet Explorer 9 und frühere Browser derzeit jedoch nicht das Text-Shadow-Attribut. Die grundlegendste Syntax ist: Textschatten: H-Schatten V-Schatten-Unschärfefarbe;
Textschatten-Attributeinstellung
Horizontaler Versatz, positiver Wert geht nach rechts, negativer Wert geht nach links.
Vertikaler Versatz, positiver Wert sinkt, negativer Wert steigt.
Unscharf, kann nicht negativ sein.
Die Farbe des Schattens.
-
Das text-shadow-Attribut hat eine weitere Funktion: das Erzielen eines Textleuchteffekts. Weitere Informationen finden Sie in anderen Artikeln auf dieser Website:
So verwenden Sie CSS3, um einen schriftinternen Leuchteffekt zu erzielen (ausführliche Erklärung)
Verwenden Sie CSS3, um einen einzelnen Textschatten zu implementieren
<!DOCTYPE html>
<html>
<head>
<title>单个阴影</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
ul>li:nth-child(odd) {
text-shadow: 2px 2px 1px red;
}
</style>
</head>
<body>
<ul>
<li>PHP中文网</li>
<li>PHP中文网</li>
<li>PHP中文网</li>
<li>PHP中文网</li>
</ul>
</body>
</html>Der Effekt ist wie in der Abbildung gezeigt
Verwenden Sie CSS3, um mehrere Textschatten zu implementieren
<!DOCTYPE html>
<html>
<head>
<title>多个阴影</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
ul>li:nth-child(odd) {
text-shadow: 2px 2px 1px red, 10px 2px 1px blue;
}
</style>
</head>
<body>
<ul>
<li>PHP中文网</li>
<li>PHP中文网</li>
<li>PHP中文网</li>
<li>PHP中文网</li>
<li>PHP中文网</li>
<li>PHP中文网</li>
<li>PHP中文网</li>
<li>PHP中文网</li>
</ul>
</body>
</html>The Der Effekt ist wie in der Abbildung gezeigt
Zusammenfassung: Das Textschattenattribut kann nicht nur dafür sorgen, dass der Text einen Schatteneffekt hat, sondern auch mehrere Schatteneffekte erzeugen Wenn es durch Kommas getrennt wird, was im normalen Front-End-Entwicklungsprozess sehr praktisch ist, zeige ich Ihnen in den folgenden Artikeln, wie Sie Bildern Schatteneffekte hinzufügen und wie Sie mit dem Text-Shadow-Attribut leuchtende Texteffekte erstellen usw., seien Sie also gespannt auf Ihre Aufmerksamkeit.
Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit CSS3 einen Einzelschatteneffekt und einen Mehrfachschatteneffekt für Text (vollständiger Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!