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?

WBOY
Freigeben: 2022-04-20 18:05:54
Original
1641 Leute haben es durchsucht

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.

Was ist der Code für CSS3, um dem Titel Schatten hinzuzufügen?

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;
Nach dem Login kopieren

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>
Nach dem Login kopieren

Ausgabeergebnis:

Was ist der Code für CSS3, um dem Titel Schatten hinzuzufügen?

(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!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage