Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

-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
Medienvisuell
Berechneter Wertwie angegeben
Animierbarwie 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 (Ja) Nicht unterstützt Nicht unterstützt (Ja) (Ja)
Merkmal Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Grundlegende Unterstützung ? Nicht unterstützt Nicht unterstützt ? ?

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

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