Propriété CSS text-stroke

La propriété text-stroke est un raccourci pour les propriétés suivantes:

Il y a la propriété text-fill-color, qui surcharge la propriété color, et permet d'avoir une bonne solution de rechange à différente color de texte dans les navigateurs qui ne supportent pas la propriété text-stroke.

Vous pouvez choisir des couleurs d'ici: Les couleurs HTML.

La propriété text-stroke est uniquement utilisée avec le préfixe vendeur -webkit-. Cette propriété n'est pas standarde. Elle ne fonctionne pas pour n'importe quel utilisateur. Il y a les incompatibilités entre les implementations et le comportement peut changer à l'avenir.

Valeur initiale	0 currentColor
Appliquée à	Tous les éléments.
Héritée	Oui.
Animable	Oui.
Version	-
Syntaxe DOM	object.style.textStroke = "1px #666";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p {
      font-size: 2.5em;
      margin: 0;
      -webkit-text-stroke: 2px #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété text-stroke</h2>
    <p>Lorem Ipsum est simplement du faux texte...</p>
  </body>
</html>

Essayez-vous-même!

Voyons un autre exemple de la propriété text-stroke avec les plusieurs valeurs utilisées:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .a {
      font-size: 2.5em;
      margin: 0;
      -webkit-text-stroke: 1px #8ebf42;
      }
      .b {
      font-size: 2.5em;
      margin: 0;
      -webkit-text-stroke: 2pt #8ebf42;
      }
      .c {
      font-size: 2.5em;
      margin: 0;
      -webkit-text-stroke: 0.1cm #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété text-stroke</h2>
    <p class="a">Lorem Ipsum est simplement du faux texte...</p>
    <p class="b">Lorem Ipsum est simplement du faux texte...</p>
    <p class="c">Lorem Ipsum est simplement du faux texte...</p>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
length	Spécifie l'epaisseur du contour.
color	Spécifie la couleur de contour. Les noms des couleurs, codes hexadecimaux des couleurs, rgb(), rgba(), hsl(), hsla() peuvent être utilisées.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.