suchen

Heim  >  Artikel  >  Web-Frontend  >  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:091164Durchsuche

如何使用 CSS 在文本上应用阴影效果？

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!

Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Die Rolle von CSS-Bild-SpritesNächster Artikel：Die Rolle von CSS-Bild-Sprites

In Verbindung stehende Artikel

Mehr sehen