-webkit-text-stroke

Diese Übersetzung ist unvollständig. Bitte helfen Sie, 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 angegeben
Animationstypwie die jeweiligen Kurzschreibweisen:
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

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( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText

wobei
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

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

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

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: cachius, teoli, Sebastianz
 Zuletzt aktualisiert von: cachius,