Parfois, nous avons besoin de créer du texte et d’ajouter le contour au texte. Il existe principalement deux méthodes pour créer une bordure aux polices qui sont énumérées ci-dessous :
- Utilisation de la propriété text-shadow
- Utilisation de la propriété text-stroke
Méthode 1 : Utilisation de la propriété text-shadow : La propriété text-shadow est utilisée pour ajouter une bordure ou une ombre de police au texte.
Syntaxe :
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
Valeurs de la propriété :
- h-shadow : Il définit l’ombre horizontale autour de la police.
- v-shadow : Il définit l’ombre verticale autour de la police.
- blur-radius : Il définit le rayon de flou autour de la police.
- couleur : Il définit la couleur autour de la police.
- non : Il ne définit rien autour de la police.
- initial : Il définit la bordure de la police à sa valeur par défaut.
- hériter : Il hérite des valeurs de propriété de ses valeurs parentales.
Valeur de retour : Elle renvoie une bordure/ombre de police autour du texte.
Exemple 1 : Cet exemple utilise la propriété text-shadow pour créer une ombre au texte.
.
<!DOCTYPE html><html
> <
head> <title> CSS text-shadow property. </title>
<style> h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; } </style>
</head>. <body>
<h1>GeeksforGeeks</h1> .
</body>
</html>
Sortie :
Exemple 2 : Cet exemple utilise la propriété text-shadow pour créer un texte bordé.
<!DOCTYPE html><html>
<head> <title> CSS text-shadow property </title> <style> .GFG {. color: white; font-size: 50px; text-shadow: -1px 1px 0 #000,
1px 1px 0 #000,
1px -1px 0 #000, -1px -1px 0 #000;
}
</style> </head>
<body> <pclass="GFG">GeeksforGeeks</p> </body>
</html> .
Sortie :
Méthode 2 : utilisation de la propriété text-stroke : La propriété text-stroke est utilisée pour ajouter un trait au texte. Cette propriété peut être utilisée pour modifier la largeur et la couleur du texte. Cette propriété est prise en charge par l’utilisation du préfixe -webkit-.
Exemple : Cet exemple utilise la propriété text-stroke pour créer un texte bordé.
<!DOCTYPE html><html> <head>
<title> CSS text-stroke property </title> <style> .GFG { color: white;
font-size: 50px; -webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black; }
</style> </head> <body> <pclass="GFG">GeeksforGeeks</p> </body> </html> .
Sortie :
.