-webkit-text-stroke-width
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-width permet de définir l'épaisseur du trait qui entoure les lettres du texte.
Syntaxe
css
/* Valeurs avec un mot-clé */
-webkit-text-stroke-width: thin;
-webkit-text-stroke-width: medium;
-webkit-text-stroke-width: thick;
/* Valeurs de longueur */
/* Type <length> */
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-width: 0.1em;
-webkit-text-stroke-width: 1mm;
-webkit-text-stroke-width: 5pt;
/* Valeurs globales */
-webkit-text-stroke-width: inherit;
-webkit-text-stroke-width: initial;
-webkit-text-stroke-width: revert;
-webkit-text-stroke-width: revert-layer;
-webkit-text-stroke-width: unset;
Valeurs
<line-width>-
La largeur du trait utilisé pour entourer les lettres du texte.
Définition formelle
| Valeur initiale | 0 |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | oui |
| Valeur calculée | une longueur (type <length>) absolue |
| Type d'animation | discrète |
Syntaxe formelle
-webkit-text-stroke-width =
<line-width>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
Exemples
Varier l'épaisseur du trait
CSS
css
p {
margin: 0;
font-size: 4em;
-webkit-text-stroke-color: red;
}
#thin {
-webkit-text-stroke-width: thin;
}
#medium {
-webkit-text-stroke-width: 3px;
}
#thick {
-webkit-text-stroke-width: 1.5mm;
}
HTML
html
<p id="thin">Trait fin</p>
<p id="medium">Trait moyen</p>
<p id="thick">Trait épais</p>
Résultat
Spécifications
| Specification |
|---|
| Compatibility # the-webkit-text-stroke-width |
Compatibilité des navigateurs
Chargement…