-webkit-text-stroke-color

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

Non standard: Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

La propriété -webkit-text-stroke-color permet de définir la couleur de la ligne utilisée pour le contour du text. Si cette propriété n'est pas définie, c'est la valeur de color qui sera utilisée.

css

/* Valeurs de couleur */
/* Type <color>       */
-webkit-text-stroke-color: red;
-webkit-text-stroke-color: #e08ab4;
-webkit-text-stroke-color: rgb(200, 100, 0);

/* Valeurs globales */
-webkit-text-stroke-color: inherit;
-webkit-text-stroke-color: initial;
-webkit-text-stroke-color: unset;

Valeur initiale	`currentcolor`
Applicabilité	tous les éléments
Héritée	oui
Valeur calculée	couleur calculée
Type d'animation	une couleur

Syntaxe

Valeurs

<color>: La couleur du contour pour les lettres.

Syntaxe formelle

-webkit-text-stroke-color = 
  <color>

Exemples

HTML

html

<p>Texte avec un contour</p>
<input type="color" value="#ff0000" />

CSS

css

p {
  margin: 0;
  font-size: 4em;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: #ff0000;
  /* Cette valeur peut être modifiée */
}

var colorPicker = document.querySelector("input");
colorPicker.addEventListener("change", function (evt) {
  document.querySelector("p").style.webkitTextStrokeColor = evt.target.value;
});

Résultat

Spécifications

Specification
Compatibility Standard # the-webkit-text-stroke-color

Compatibilité des navigateurs

BCD tables only load in the browser