Heim >Web-Frontend >Front-End-Fragen und Antworten >Was ist der Code für CSS3, um dem Titel Schatten hinzuzufügen?
Was ist der Code für CSS3, um dem Titel Schatten hinzuzufügen?
- WBOYOriginal
- 2022-04-20 16:33:011634Durchsuche
Der Code lautet „Titelelement {Textschatten: horizontale Schattenposition, vertikale Schattenposition, Unschärfeabstand, Schattenfarbe}“, wobei das Attribut „Textschatten“ verwendet wird, um dem Text einen Schatten, die horizontale Schattenposition und die vertikale Position hinzuzufügen Schattenposition in diesem Attribut. Wenn der Wert von auf einen negativen Wert eingestellt ist, verläuft die Richtung des Schattens in der negativen Richtung der x-Achse und in der positiven Richtung der y-Achse.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
Was ist der CSS3-Code zum Hinzufügen von Schatten zum Titel?
Die Text-Shadow-Eigenschaft wird auf Schattentext angewendet.
Die Syntax lautet:
text-shadow: h-shadow v-shadow blur color;
Die Eigenschaft text-shadow verbindet einen oder mehrere Schattentexte. Die Eigenschaft ist ein Schatten, der alle 2 oder 3 Längenwerte und einen optionalen Farbwert durch Kommas getrennt angibt. Die abgelaufene Länge beträgt 0.
Die Parameter werden wie folgt ausgedrückt:
h-shadow ist erforderlich. Die Position des horizontalen Schattens. Negative Werte sind erlaubt.
V-Shadow erforderlich. Die Position des vertikalen Schattens. Negative Werte sind erlaubt.
unschärfe Optional. Verschwommene Distanz.
Farbe optional. Die Farbe des Schattens.
Das Beispiel sieht wie folgt aus:
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
h1 {text-shadow:2px 2px 8px #FF0000;}
</style>
</head>
<body>
<h1>Text-shadow with blur effect</h1>
<p><b>注意:</b>IE 9及更早版本的浏览器不支持 text-shadow 属性.</p>
</body>
</html>Ausgabeergebnis:
(Teilen von Lernvideos: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonWas ist der Code für CSS3, um dem Titel Schatten hinzuzufügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!