CSS text-shadow-Eigenschaft

Die CSS-Eigenschaft text-shadow wird verwendet, um Texten Schatten hinzuzufügen. Farben können Sie hier auswählen: HTML-Farben.

Die Eigenschaft text-shadow ist eine der CSS3-Eigenschaften.

Jeder Schatten wird durch 2 bis 3 Längenwerte und einen optionalen <color>-Wert festgelegt. Der erste Wert bestimmt den horizontalen Abstand (x-Offset), der zweite Wert den vertikalen Abstand (y-Offset), der dritte Wert den Unschärfenradius und der Farbwert die Schattenfarbe.

INFO

Der x-Offset und der y-Offset sind obligatorisch, der dritte Wert ist optional.

Anfangswert	none
Gilt für	Alle Elemente. Gilt auch für ::first-letter und ::first-line.
Vererbt	Ja.
Animierbar	Ja.
Version	CSS3
DOM-Syntax	object.style.textShadow = "1px 3px 3px #8ebf42";

Syntax

Syntax der CSS text-shadow-Eigenschaft

css

text-shadow: h-shadow v-shadow [blur-radius] [color] | none | initial | inherit;

Beispiel für die text-shadow-Eigenschaft:

Beispiel für die CSS text-shadow-Eigenschaft

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .shadow {
        text-shadow: 2px 2px #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Text-shadow property example</h2>
    <p>Some paragraph for example.</p>
    <p class="shadow">Some paragraph with the text-shadow property.</p>
  </body>
</html>

Try it Yourself »

Ergebnis

CSS text-shadow Property

Beispiel für die text-shadow-Eigenschaft mit den Werten „x-Offset“, „y-Offset“, „Unschärfenradius“ und „Farbe“:

Beispiel für die CSS text-shadow-Eigenschaft, bei der x-Offset, y-Offset, Unschärfenradius und Farbe angegeben sind

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        text-shadow: 5px 3px 2px #8ebf42;
        font: 1em Roboto, Helvetica, sans-serif;
      }
    </style>
  </head>
  <body>
    <h2>Text-shadow property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </body>
</html>

Try it Yourself »

Werte

Wert	Beschreibung	Ausführen
h-shadow	Der horizontale Versatz des Schattens. Bei positivem Wert wird der Schatten rechts vom Text gezeichnet, bei negativem Wert links.	Ausführen »
v-shadow	Der vertikale Versatz des Schattens (y-Achse). Bei positivem Wert befindet sich der Schatten unter dem Text, bei negativem Wert darüber.	Ausführen »
blur-radius	Der Unschärfenradius bestimmt, wie groß und wie stark der Schatten verschwommen ist. Negative Werte sind nicht erlaubt. Standardwert ist 0.	Ausführen »
color	Ermöglicht die Auswahl einer Schattenfarbe. Es können Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() verwendet werden.	Ausführen »
none	Es wird kein Schatten festgelegt. Dies ist der Standardwert dieser Eigenschaft.	Ausführen »
initial	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.	Ausführen »
inherit	Erbt die Eigenschaft vom Elternelement.

Praxis

Welche der folgenden Aussagen sind über die CSS text-shadow-Eigenschaft wahr?

Die CSS text-shadow-Eigenschaft wird verwendet, um Texten einen Schatten hinzuzufügen.Die CSS text-shadow-Eigenschaft kann nur einen einzelnen Schatteneffekt anwenden.Die CSS text-shadow-Eigenschaft benötigt vier Werte: Horizontaler Schatten, Vertikaler Schatten, Unschärfenradius und Farbe.Die CSS text-shadow-Eigenschaft kann nicht auf transparenten Text angewendet werden.Sie können mehrere Schatten mit der CSS text-shadow-Eigenschaft anwenden, indem Sie jeden Schatten im kommagetrennten Format angeben.

CSS text-shadow-Eigenschaft ​

Syntax ​

Beispiel für die text-shadow-Eigenschaft: ​

Ergebnis ​

Beispiel für die text-shadow-Eigenschaft mit den Werten „x-Offset“, „y-Offset“, „Unschärfenradius“ und „Farbe“: ​

Werte ​