Heim >Web-Frontend >CSS-Tutorial >Wie wende ich mit CSS einen Schatteneffekt auf Text an?
Wie wende ich mit CSS einen Schatteneffekt auf Text an?
- 王林nach vorne
- 2023-08-23 23:17:091212Durchsuche
Mit der von CSS bereitgestellten Eigenschaft „text-shadow“ können wir Schatteneffekte auf Textelemente anwenden. Die Eigenschaft „text-shadow“ akzeptiert eine Liste von Werten, die den X- und Y-Versatz des Schattens relativ zum Element, den Unschärferadius des Schattens und die Farbe des Schattens darstellen. Die Werte sind in der folgenden Syntax aufgeführt -
Grammatik
text-shadow: offset_y offset_x blur-radius color
Hier ist eine Liste der Werte und ihrer Bedeutung -
Offset-x − Stellt den Abstand des Schattens vom Element in horizontaler Richtung dar
Offset-y − Stellt den Abstand des Schattens vom Element in vertikaler Richtung dar
Unschärferadius − Stellt die Deckkraft des Schattens dar
Farbe − Stellt die Farbe des Schattens dar
Beispiel 1
In diesem Beispiel wenden wir einen Schatteneffekt auf ein „h3“-Element an und geben dem Schatten einen Y-Versatz sowie eine rote Farbe
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to Apply Shadow Effect on Text Using CSS?</title>
<style>
h3 {
text-shadow: 0 15px 0 red;
}
</style>
</head>
<body>
<h3>How to Apply Shadow Effect on Text Using CSS?</h3>
</body>
</html>
Beispiel 2
In diesem Beispiel wenden wir einen Schatteneffekt auf ein „h3“-Element an und geben dem Schatten einen y-Versatz, einen x-Versatz, eine Transparenz und eine grüne Farbe.
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to Apply Shadow Effect on Text Using CSS?</title>
<style>
h3 {
text-shadow: 10px 15px 5px green;
}
</style>
</head>
<body>
<h3>How to Apply Shadow Effect on Text Using CSS?</h3>
</body>
</html>
Fazit
In diesem Artikel haben wir die Eigenschaft „text-shadow“ kennengelernt und mithilfe von CSS Schatteneffekte auf Textelemente angewendet, was anhand von zwei verschiedenen Beispielen demonstriert wurde. Im ersten Beispiel haben wir einen vertikalen Schatteneffekt mit der Farbe „Rot“ angewendet, während wir im zweiten Beispiel einen vertikalen und einen horizontalen Schatteneffekt mit der Farbe „Grün“ und einem Unschärferadius von 5 Pixeln angewendet haben.
Das obige ist der detaillierte Inhalt vonWie wende ich mit CSS einen Schatteneffekt auf Text an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!