CSS text-stroke-color Eigenschaft
Mit der CSS-Eigenschaft text-stroke-color legen Sie die Strichfarbe fest. Sehen Sie Werte und Beispiele.
Die Eigenschaft text-stroke-color legt die Farbe des Strichs (der Umrisslinie, die um die Ränder jedes Zeichens gezeichnet wird) unabhängig von der color des Textes fest, die das Innere des Glyphen füllt. Zusammen mit text-stroke-width ermöglicht sie es, Text einen umrandeten, hohlen oder zweifarbigen Look zu geben — eine gängige Technik für große Display-Überschriften, Logos und Badges.
Diese Eigenschaft wirkt sich nur aus, wenn eine Strichbreite festgelegt ist. Bei einer Breite von 0 (der Standardwert) gibt es nichts zu färben, und Sie werden keinen Unterschied auf dem Bildschirm sehen.
Der Anfangswert ist currentColor, was bedeutet, dass der Strich — sofern nicht explizit gesetzt — der color des Elements entspricht. Wenn Ihr Text also blau ist, ist auch die Umrisslinie blau.
Wann verwenden
- Umrandete Überschriften — füllen Sie den Text mit einer Farbe und umranden Sie ihn mit einer anderen, um Akzente zu setzen.
- Hohler / „Ghost"-Text — setzen Sie
color: transparentund verlassen Sie sich vollständig auf den Strich, sodass nur die Umrisslinie sichtbar ist. - Lesbarkeit auf unruhigen Hintergründen — ein dünner dunkler Strich auf hellem Text (oder umgekehrt) hält Wörter auf Bildern lesbar.
Browser-Unterstützung
text-stroke-color ist Teil des Standards, aber für eine breite Browser-Kompatibilität sollten Sie auch die Eigenschaft mit dem Präfix -webkit-text-stroke-color setzen. Kombinieren Sie sie immer mit -webkit-text-stroke-width. Die Kurzform -webkit-text-stroke setzt Breite und Farbe in einer Deklaration.
Sie können jeden CSS-Farbwert verwenden. Siehe HTML-Farben, die vollständige Liste der CSS-Farbnamen oder die Eigenschaft color für die verfügbaren Formate.
| Anfangswert | currentColor |
|---|---|
| Gilt für | Alle Elemente. |
| Vererbbar | Ja. |
| Animierbar | Ja. Die Farbe ist animierbar. |
| Version | CSS Text Module Level 4 |
| DOM-Syntax | object.style.textStrokeColor = "#8ebf42"; |
Syntax
CSS text-stroke-color Werte
text-stroke-color: color | initial | inherit;Interaktives Beispiel
Das folgende Beispiel zeichnet den Text grün um und erlaubt es Ihnen, die Strichfarbe live mit einem Farbwähler zu ändern. Beachten Sie, wie die Eigenschaft mit und ohne Präfix gemeinsam gesetzt werden.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
gap: 1em;
margin-top: 2em;
}
p {
margin: 0;
font-size: 3em;
-webkit-text-stroke-width: 2px;
text-stroke-width: 2px;
-webkit-text-stroke-color: #8ebf42;
text-stroke-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Text-stroke-color property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
<input type="color" value="#8ebf42" />
<script>
const input = document.querySelector('input[type="color"]');
const p = document.querySelector('p');
input.addEventListener('input', (e) => {
p.style.webkitTextStrokeColor = e.target.value;
p.style.textStrokeColor = e.target.value;
});
</script>
</body>
</html>Ergebnis
Beispiel für hohlen (nur umrandeten) Text
Setzen Sie die color des Textes auf transparent, damit die Füllung verschwindet und nur der Strich übrig bleibt. Dadurch entsteht eine klassische „Ghost"- oder Umriss-Überschrift.
<!DOCTYPE html>
<html>
<head>
<title>Hollow text with text-stroke-color</title>
<style>
h1 {
font-size: 4em;
color: transparent;
-webkit-text-stroke-width: 2px;
text-stroke-width: 2px;
-webkit-text-stroke-color: #1c87c9;
text-stroke-color: #1c87c9;
}
</style>
</head>
<body>
<h1>Outline</h1>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| color | Gibt die Farbe des Strichs an. Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() können verwendet werden. |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Verwandte Eigenschaften
text-stroke-width— legt fest, wie dick der Strich ist. Ohne eine Breite hattext-stroke-colorkeinen sichtbaren Effekt.text-stroke— Kurzform, die Strichbreite und -farbe zusammen setzt.text-fill-color— steuert die innere Füllfarbe unabhängig voncolor.color— die Standard-Textfarbe; auch die Quelle voncurrentColor, der anfänglichen Strichfarbe.