text-shadow CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die text-shadow CSS Eigenschaft fügt Schatten zu Text hinzu. Sie akzeptiert eine kommagetrennte Liste von Schatten, die auf den Text und seine text-decoration angewendet werden sollen. Jeder Schatten wird durch eine Kombination aus X- und Y-Versatz des Elements, 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
/* 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 kommagetrennte Liste von Schatten angegeben.
Jeder Schatten wird als zwei oder drei <length> Werte angegeben, 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 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 Pseudo-Elemente.
Werte
<color>-
Optional. Die Farbe des Schattens. Sie kann entweder vor oder nach den Versatzwerten angegeben werden. Wenn sie nicht angegeben wird, bleibt der Wert der Farbe dem User-Agent überlassen. Wenn Konsistenz zwischen Browsern 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 Werte0sind, wird der Schatten direkt hinter den 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, beträgt der Standardwert0.
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 |
<shadow>#
<shadow> =
<color>? &&
[ <length>{2} [ <length [0,∞]> <length>? ]? ] &&
inset?
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
| Spezifikation |
|---|
| CSS Text Decoration Module Level 3 # text-shadow-property |