-webkit-text-stroke

Kein Standard

Diese Funktion entspricht nicht dem Standard und ist nicht Teil der Standardisierung. Diese Funktion darf nicht in Webseiten, die via das Internet zug├Ąnglich sind, benutzt werden: Sie wird nicht f├╝r alle Nutzer funktionieren. Es kann zu umfangreichen Inkompatibilit├Ąten zwischen verschiedenen Implementierungen kommen und die Funktionsweise oder Eigenschaften k├Ânnten in der Zukunft ver├Ąndert werden.

├ťbersicht

Die -webkit-text-stroke CSS Eigenschaft gibt die Breite und Farbe der Umrandung von Textzeichen an. Sie ist eine Kurzschreibweise f├╝r die Langschreibungseigenschaften -webkit-text-stroke-width und -webkit-text-stroke-color.

Initialwertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufalle Elemente
VererbtJa
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypwie die jeweiligen Kurzschreibweisen:

Syntax

/* Breiten- und Farbwerte */
-webkit-text-stroke: 4px navy;

/* Globale Werte */
-webkit-text-stroke: inherit;
-webkit-text-stroke: initial;
-webkit-text-stroke: unset;

Werte

<length>
Die Breite der Umrandung.
<color>
Die Farbe der Umrandung.

Formale Syntax

<length> || <color>

wobei
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

wobei
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

wobei
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Beispiel

HTML

<p id="example">Die Umrandung dieses Texts ist rot.</p>

CSS

#example {
  font-size: 50px;
  margin: 0;
  -webkit-text-stroke: 2px red;
}

Spezifikationen

Nicht Teil einer Spezifikation.

Apple hat eine Beschreibung in der Safari CSS Referenz.

Browser Kompatibilit├Ąt

Wir konvertieren die Kompatibilit├Ątsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilit├Ątstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari
Grundlegende Unterst├╝tzung 4 48.0 (48.0)[1] Nicht unterst├╝tzt 15 3.1
Merkmal Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Grundlegende Unterst├╝tzung 4 48.0 (48.0)[1] Nicht unterst├╝tzt 36 4.1

[1] Ab Gecko 48 hinter der Einstellung layout.css.prefixes.webkit implementiert, dort noch standarm├Ą├čig false;
ab Gecko 49 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) standardm├Ą├čig true.

Siehe auch