text-shadow

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

Die text-shadow CSS Eigenschaft fügt Texten Schatten hinzu. Sie akzeptiert eine durch Kommata getrennte Liste von Schatten, die auf den Text und alle seine Dekorationen angewendet werden sollen. Jeder Schatten wird durch eine Kombination von X- und Y-Versatz, Unschärferadius und Farbe beschrieben.

Probieren Sie es aus

text-shadow: 1px 1px 2px pink;

text-shadow: #ffcc00 1px 0 10px;

text-shadow: 5px 5px #558abb;

text-shadow: red 2px 5px;

text-shadow: 5px 10px;

text-shadow:
  1px 1px 2px red,
  0 0 1em blue,
  0 0 0.2em blue;

<section id="default-example">
  <p id="example-element">
    Far out in the uncharted backwaters of the unfashionable end of the western
    spiral arm of the Galaxy...
  </p>
</section>

p {
  font:
    1.5em Georgia,
    serif;
}

Syntax

css

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;

/* color | offset-x | offset-y | blur-radius */
text-shadow: #ffcc00 1px 0 10px;

/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;

/* color | offset-x | offset-y */
text-shadow: white 2px 5px;

/* offset-x | offset-y
/* Use defaults for color and blur-radius */
text-shadow: 5px 10px;

/* Global values */
text-shadow: inherit;
text-shadow: initial;
text-shadow: revert;
text-shadow: revert-layer;
text-shadow: unset;

Diese Eigenschaft wird als eine durch Kommata getrennte Liste von Schatten angegeben.

Jeder Schatten wird als zwei oder drei <length> Werte spezifiziert, optional gefolgt von einem <color> Wert. Die ersten beiden <length> Werte sind die <offset-x> und <offset-y> Werte. Der dritte, optionale, <length> Wert ist der <blur-radius>. Der <color> Wert ist die Farbe des Schattens.

Wenn mehr als ein Schatten angegeben wird, werden die Schatten von vorne nach hinten angewendet, mit dem zuerst angegebenen Schatten oben.

Diese Eigenschaft gilt für sowohl ::first-line als auch ::first-letter Pseudoelemente.

Werte

<color>: Optional. Die Farbe des Schattens. Sie kann entweder vor oder nach den Versatzwerten angegeben werden. Wenn sie nicht angegeben ist, liegt es im Ermessen des Benutzeragenten, den Wert der Farbe zu bestimmen. Wenn Konsistenz über verschiedene Browser hinweg gewünscht ist, sollten Sie sie explizit definieren.
<offset-x> <offset-y>: Erforderlich. Diese <length> Werte geben den Abstand des Schattens vom Text an. <offset-x> gibt den horizontalen Abstand an; ein negativer Wert platziert den Schatten links vom Text. <offset-y> gibt den vertikalen Abstand an; ein negativer Wert platziert den Schatten über dem Text. Wenn beide Werte 0 sind, wird der Schatten direkt hinter dem Text platziert, obwohl er aufgrund des Effekts von <blur-radius> teilweise sichtbar sein kann.
<blur-radius>: Optional. Dies ist ein <length> Wert. Je höher der Wert, desto größer die Unschärfe; der Schatten wird breiter und heller. Wenn nicht angegeben, ist der Standardwert 0.

Formale Definition

Anfangswert	`none`
Anwendbar auf	alle Elemente. Auch anwendbar auf `::first-letter` und `::first-line`.
Vererbt	Ja
Berechneter Wert	eine Farbe plus drei absolute Längen
Animationstyp	eine Liste von Schatten

Formale Syntax

text-shadow = 
  none                            |
  [ <color>? && <length>{2,3} ]#

Beispiele

Einfacher Schatten

css

.red-text-shadow {
  text-shadow: red 0 -2px;
}

html

<p class="red-text-shadow">
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.
</p>

Mehrere Schatten

css

.white-text-with-blue-shadow {
  text-shadow:
    1px 1px 2px black,
    0 0 1em blue,
    0 0 0.2em blue;
  color: white;
  font:
    1.5em Georgia,
    serif;
}

html

<p class="white-text-with-blue-shadow">
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.
</p>

Spezifikationen

Specification
CSS Text Decoration Module Level 3 # text-shadow-property

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden