Propriété CSS text-stroke-color

La propriété text-stroke-color spécifie la couleur du trait des caractères. La valeur initiale de la propriété text-stroke-color est currentColor.

Vous pouvez choisir des couleurs ici Couleurs HTML.

INFO

La propriété text-stroke-color est une propriété CSS standard, mais nécessite actuellement le préfixe -webkit- pour une prise en charge large par les navigateurs. Firefox ne la prend pas encore en charge.

Valeur initiale	currentColor
S'applique à	Tous les éléments.
Héritée	Oui.
Animable	Oui. La couleur est animable.
Version	CSS Text Module Level 4
Syntaxe DOM	object.style.textStrokeColor = "#8ebf42";

Syntaxe

Valeurs CSS text-stroke-color

css

text-stroke-color: color | initial | inherit;

Exemple de la propriété text-stroke-color :

Exemple de code CSS text-stroke-color

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1em;
        margin-top: 2em;
      }
      p {
        margin: 0;
        font-size: 3em;
        -webkit-text-stroke-width: 2px;
        text-stroke-width: 2px;
        -webkit-text-stroke-color: #8ebf42;
        text-stroke-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Text-stroke-color property example</h2>
    <p>Lorem Ipsum is simply dummy text...</p>
    <input type="color" value="#8ebf42" />
    <script>
      const input = document.querySelector('input[type="color"]');
      const p = document.querySelector('p');
      input.addEventListener('input', (e) => {
        p.style.webkitTextStrokeColor = e.target.value;
        p.style.textStrokeColor = e.target.value;
      });
    </script>
  </body>
</html>

Try it Yourself »

Résultat

Liste des valeurs text-stroke-color

Valeurs

Valeur	Description
color	Spécifie la couleur du trait. Les noms de couleurs, les codes hexadécimaux, rgb(), rgba(), hsl(), hsla() peuvent être utilisés.
initial	Définit la valeur par défaut de la propriété.
inherit	Hérite la propriété de son élément parent.

Pratique

La valeur par défaut de text-stroke-color est la valeur par défaut de la

propriété border-color.propriété color.propriété background-color.

Propriété CSS text-stroke-color ​

Syntaxe ​

Exemple de la propriété text-stroke-color : ​

Résultat ​