-webkit-text-stroke

Diese Übersetzung ist unvollständig. Bitte helfen Sie uns, diesen Artikel aus dem Englischen zu übersetzen

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
Medienvisuell
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypwie die jeweiligen Kurzschreibweisen:
Kanonische ReihenfolgeKanonische Reihenfolge

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

Verwandte Themen