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>

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>

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.

Support de Navigateurs

4.0+ -webkit- 15.0+ -webkit- 49.0+ -webkit- 11.0+
3.1 - 10.1 -webkit-
15.0+ -webkit-


Trouvez-vous cela utile?

Articles Associées