-webkit-text-stroke
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit April 2017 browserübergreifend verfügbar.
Die -webkit-text-stroke CSS Eigenschaft gibt die Breite und Farbe von Konturen für Textzeichen an. Dies ist eine Kurzschreibweise für die Langschreib-Eigenschaften -webkit-text-stroke-width und -webkit-text-stroke-color.
Einzelne Eigenschaften
Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:
Syntax
css
/* Width and color values */
-webkit-text-stroke: 4px navy;
/* Global values */
-webkit-text-stroke: inherit;
-webkit-text-stroke: initial;
-webkit-text-stroke: revert;
-webkit-text-stroke: revert-layer;
-webkit-text-stroke: unset;
Werte
Formale Definition
| Anfangswert | wie die jeweiligen Kurzschreibweisen:
|
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Ja |
| Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
| Animationstyp | wie die jeweiligen Kurzschreibweisen: |
Formale Syntax
-webkit-text-stroke =
<line-width> ||
<color>
<line-width> =
<length [0,∞]> |
hairline |
thin |
medium |
thick
Beispiele
Hinzufügen einer roten Textkontur
HTML
html
<p id="example">The stroke of this text is red.</p>
CSS
css
#example {
font-size: 3em;
margin: 0;
-webkit-text-stroke: 2px red;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| Compatibility # the-webkit-text-stroke |