CSS text-stroke-Eigenschaft

Die text-stroke-Eigenschaft ist eine experimentelle Eigenschaft, die Dekorationsmöglichkeiten für Text bietet. Sie ist eine Kurzschreibweise für die folgenden Eigenschaften:

Es gibt die text-fill-color-Eigenschaft, die die color-Eigenschaft überschreibt und so ein elegantes Fallback auf eine andere Textfarbe in Browsern ermöglicht, die die text-stroke-Eigenschaft nicht unterstützen.

Farben können Sie hier auswählen: HTML-Farben.

Web-Schriften basieren typischerweise auf Vektorgrafiken, was bedeutet, dass die Form durch Mathematik und Punkte anstelle von Pixeldaten bestimmt wird. Da es sich um Vektoren handelt, können wir alles tun, was mit Vektor-Text in anderen Vektorprogrammen möglich ist. Zum Beispiel können wir bestimmten Zeichen einen Strich hinzufügen.

WARNING

Die text-stroke-Eigenschaft wird nur mit dem -webkit_-Vendor-Präfix verwendet. Diese Eigenschaft ist nicht standardisiert. Sie funktioniert nicht für jeden Benutzer. Es gibt Inkompatibilitäten zwischen den Implementierungen, und das Verhalten kann sich in Zukunft ändern.

Anfangswert	0 currentColor
Anwendbar auf	Alle Elemente.
Vererbbar	Ja.
Animierbar	Ja.
Version	Kompatibilitätsstandard
DOM-Syntax	object.style.textStroke = "1px #666";

Syntax

CSS text-stroke-Werte

css

text-stroke: length | color | initial | inherit;

Beispiel für die text-stroke-Eigenschaft:

CSS text-stroke-Codebeispiel

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-size: 2.5em;
        margin: 0;
        -webkit-text-stroke: 2px #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Text-stroke property example</h2>
    <p>Lorem Ipsum is simply dummy text...</p>
  </body>
</html>

Try it Yourself »

Ergebnis

Beispiel für die text-stroke-Eigenschaft mit mehreren Werten:

CSS text-stroke-Beispiel mit mehreren Werten

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .a {
        font-size: 2.5em;
        margin: 0;
        -webkit-text-stroke: 1px #8ebf42;
      }
      .b {
        font-size: 2.5em;
        margin: 0;
        -webkit-text-stroke: 2pt #8ebf42;
      }
      .c {
        font-size: 2.5em;
        margin: 0;
        -webkit-text-stroke: 0.1cm #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Text-stroke property example</h2>
    <p class="a">Lorem Ipsum is simply dummy text...</p>
    <p class="b">Lorem Ipsum is simply dummy text...</p>
    <p class="c">Lorem Ipsum is simply dummy text...</p>
  </body>
</html>

Try it Yourself »

Werte

Wert	Beschreibung
length	Gibt die Dicke des Strichs an.
color	Gibt die Farbe des Strichs an. Es können Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() verwendet werden.
initial	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.
inherit	Erbt die Eigenschaft vom Elternelement.

Practice

Die text-stroke-Eigenschaft ist eine Kurzschreibweise für die folgenden Eigenschaften:

text-stroke-style, text-stroke-colortext-stroke-width, text-stroke-colortext-stroke-width, text-stroke-styletext-stroke-style, text-stroke-type

CSS text-stroke-Eigenschaft ​

Syntax ​

Beispiel für die text-stroke-Eigenschaft: ​

Ergebnis ​

Beispiel für die text-stroke-Eigenschaft mit mehreren Werten: ​

Werte ​