W3docs

CSS text-stroke-color-Eigenschaft

Use the text-stroke CSS property to specify the color of the stroke. See property values and try examples.

Die text-stroke-color-Eigenschaft legt die Farbe des Zeichenstrichs fest. Der Anfangswert der text-stroke-color-Eigenschaft ist currentColor.

Hier können Sie Farben auswählen HTML-Farben.

info

Die text-stroke-color-Eigenschaft ist eine Standard-CSS-Eigenschaft, erfordert jedoch derzeit für eine breite Browserunterstützung das -webkit--Präfix. Firefox unterstützt sie noch nicht.

AnfangswertcurrentColor
Anwendbar aufAlle Elemente.
VererbbarJa.
AnimierbarJa. Die Farbe ist animierbar.
VersionCSS Text Module Level 4
DOM-Syntaxobject.style.textStrokeColor = "#8ebf42";

Syntax

CSS text-stroke-color-Werte

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

Beispiel zur text-stroke-color-Eigenschaft:

CSS text-stroke-color-Codebeispiel

<!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

SS text-stroke-color values list

Werte

WertBeschreibung
colorLegt die Farbe des Strichs fest. Es können Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() verwendet werden.
initialLegt fest, dass die Eigenschaft ihren Standardwert verwendet.
inheritErbt die Eigenschaft vom übergeordneten Element.

Practice

Übung

Der Standardwert von text-stroke-color ist der Standardwert der