Définir la bordure de police dans CSS

1. Utilisez la propriété -webkit-text-stroke pour appliquer des bordures à la police en CSS
2. Utilisez la propriété text-shadow pour appliquer des bordures à la police en CSS

Ce didacticiel présentera des méthodes pour appliquer une bordure et une couleur à la police en CSS.

Utilisez la propriété -webkit-text-stroke pour appliquer des bordures à la police en CSS

Nous pouvons utiliser la propriété text-stroke sur un texte pour appliquer des bordures à une police en CSS. Nous devons utiliser le préfixe webkit avant la propriété text-stroke pour utiliser la fonctionnalité. Cependant, il ne fonctionne que sur les navigateurs basés sur le web-kit comme Safari et Chrome. La propriété text-stroke nous permet de décorer le texte dans des applications de dessin vectoriel comme Adobe Illustrator. La propriété est le raccourci des deux autres propriétés, text-stroke-width et text-stroke-color. Ainsi, nous pouvons définir la largeur et la couleur de la bordure d’un texte avec la propriété text-stroke.

Par exemple, écrivez du texte à l’intérieur de la balise h1 en HTML. En CSS, sélectionnez la balise h1 et appliquez la propriété -webkit-text-stroke. Réglez la largeur sur 1px et la couleur sur red. Ensuite, définissez la police sur arial en utilisant la propriété font-family et donnez la couleur green.

L’exemple ci-dessous affichera un texte de couleur verte avec une bordure de couleur rouge. C’est ainsi que nous pouvons définir des bordures dans une police avec une couleur différente.

Exemple de code :

<h1>The green font has red border</h1>

h1 {
 -webkit-text-stroke: 1px red;
 font-family: arial; color: green;
}

Utilisez la propriété text-shadow pour appliquer des bordures à la police en CSS

Nous pouvons émuler la propriété text-stroke en utilisant la propriété text-shadow pour appliquer une bordure à la police en CSS. La propriété text-shadow est utilisée pour créer une ombre sur un texte. Les deux premières valeurs désignent les propriétés h-shadow et v-shadow. Ils désignent la position de l’ombre horizontale et verticale. Nous pouvons définir la valeur blur-radius comme troisième valeur dans la propriété text-shadow. Il brouillera l’ombre de la position donnée avec le rayon donné. Nous pouvons spécifier la couleur de l’ombre, ce qui en fait la quatrième valeur de la propriété text-shadow. Cette méthode fonctionne sur la plupart des navigateurs.

Par exemple, écrivez du texte à l’intérieur de la balise h1 en HTML. En CSS, sélectionnez la balise h1 et écrivez la propriété text-shadow. Donnez la valeur 0 pour les propriétés h-shadow et v-shadow. Écrivez 2px pour blur-radius et donnez la couleur red.

Nous avons émulé la fonction de bordure sur une police en utilisant la propriété text-shadow dans l’exemple ci-dessous. Nous définissons la valeur 0 pour les rayons horizontal et vertical afin que l’ombre ressemble à une bordure lors de la coloration de l’ombre.

Exemple de code :

<h1>The black font has red border</h1>

h1 {
 text-shadow: 0 0 2px red;
}