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 July 2015.

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

Probieren Sie es aus

Syntax

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

/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 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 kommagetrennte Liste von Schatten angegeben.

Jeder Schatten wird spezifiziert durch zwei oder drei <length>-Werte, gefolgt optional 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 bestimmt die Farbe des Schattens.

Wenn mehr als ein Schatten angegeben wird, werden die Schatten von vorne nach hinten angewendet, wobei der zuerst angegebene Schatten oben liegt.

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

Werte

<color>

Optional. Die Farbe des Schattens. Sie kann entweder vor oder nach den Versatzwerten angegeben werden. Wenn nicht angegeben, bleibt der Farbwert dem Benutzeragenten überlassen, daher sollte er explizit festgelegt werden, wenn Konsistenz über Browser hinweg gewünscht wird.

<offset-x> <offset-y>

Erforderlich. Diese <length>-Werte geben den Abstand des Schattens vom Text an. <offset-x> bestimmt den horizontalen Abstand; ein negativer Wert platziert den Schatten links vom Text. <offset-y> bestimmt den vertikalen Abstand; ein negativer Wert platziert den Schatten über dem Text. Wenn beide Werte 0 sind, wird der Schatten direkt hinter dem Text platziert, kann jedoch teilweise sichtbar sein aufgrund des Effekts des <blur-radius>.

<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, wird 0 als Standardwert verwendet.

Formale Definition

Initialer Wertnone
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter und ::first-line.
VererbtJa
Berechneter Werteine Farbe plus drei absolute Längen
Animationstypeine 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

BCD tables only load in the browser

Siehe auch