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 komma-separierte Liste von Schatten, die auf den Text und seine Decorations
angewendet werden. Jeder Schatten wird durch eine Kombination von X- und Y-Versatz des Elements, Unschärferadius und Farbe beschrieben.
Probieren Sie es aus
Syntax
/* 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 eine komma-separierte Liste von Schatten angegeben.
Jeder Schatten wird als zwei oder drei <length>
-Werte spezifiziert, gefolgt von einem optionalen <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 ist, werden 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 User-Agent überlassen, sodass Sie, wenn Konsistenz über verschiedene Browser hinweg gewünscht ist, diese explizit definieren sollten.
<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 oberhalb des Textes. Wenn beide Werte0
sind, wird der Schatten direkt hinter dem Text platziert, obwohl er teilweise aufgrund des Effekts des<blur-radius>
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 Standardwert0
.
Formal 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 |
Formal syntax
Beispiele
Einfacher Schatten
.red-text-shadow {
text-shadow: red 0 -2px;
}
<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>
Mehrfache Schatten
.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;
}
<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
- Der
<color>
Datentyp (zur Angabe der Farbe des Schattens) box-shadow
drop-shadow()