-webkit-text-stroke
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis avril 2017.
La propriété -webkit-text-stroke permet de définir l'épaisseur et la couleur du contour utilisé pour les lettres d'un texte. Cette propriété est une propriété raccourcie qui permet de définir les propriétés -webkit-text-stroke-width et -webkit-text-stroke-color.
Syntaxe
css
/* Valeurs de largeur et de couleur */
-webkit-text-stroke: 4px navy;
/* Valeurs globales */
-webkit-text-stroke: inherit;
-webkit-text-stroke: initial;
-webkit-text-stroke: revert;
-webkit-text-stroke: revert-layer;
-webkit-text-stroke: unset;
Valeurs
Définition formelle
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
|---|---|
| Applicabilité | tous les éléments |
| Héritée | oui |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
| Type d'animation | pour chaque propriété individuelle de la propriété raccourcie :
|
Syntaxe formelle
-webkit-text-stroke =
<line-width> ||
<color>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
Exemples
Ajouter un contour rouge au texte
CSS
css
#exemple {
font-size: 3em;
margin: 0;
-webkit-text-stroke: 2px red;
}
HTML
html
<p id="exemple">Le contour de ce texte est rouge.</p>
Résultat
Spécifications
| Specification |
|---|
| Compatibility # the-webkit-text-stroke |