recherche

Maison >interface Web >tutoriel CSS >Qu'est-ce que l'effet de contour du texte ?

Qu'est-ce que l'effet de contour du texte ?

WBOY
WBOYavant
2023-08-23 21:25:021317parcourir

Quest-ce que leffet de contour du texte ?

Parfois, nous devons afficher uniquement le contour du texte et supprimer le remplissage du texte. On peut aussi parler d'effet de contour.

Nous pouvons utiliser diverses propriétés CSS pour générer des effets de contour pour le texte. Par exemple, nous pouvons ajouter une bordure au texte, supprimer la couleur de remplissage du texte et ajouter un effet de contour au texte.

Ici, nous utilisons trois méthodes différentes de HTML et CSS pour afficher du texte avec effet de contour.

Utilisez diverses propriétés CSS

Dans cette méthode, nous utiliserons trois propriétés CSS pour ajouter un effet de contour au texte. Le premier est "-webkit-text-fill-color" qui modifie la couleur de remplissage du texte pour qu'elle soit la même que la couleur d'arrière-plan. La deuxième est "-webkit-text-lines-width", qui ajoute une largeur de trait au texte, et la troisième propriété CSS est "-webkit-text-lines-color", qui ajoute une couleur de contour au texte.

Grammaire

Les utilisateurs peuvent utiliser trois propriétés CSS différentes pour ajouter des effets de contour au texte selon la syntaxe suivante. 

-webkit-text-fill-color: color;
-webkit-text-stroke-width: size;
-webkit-text-stroke-color: color;

Dans la syntaxe ci-dessus, nous définissons la couleur de remplissage et la largeur du trait du texte, et le trait représente la couleur du contour.

La traduction chinoise de

Exemple 1

est :

Exemple 1

Dans l'exemple ci-dessous, nous avons un élément div avec le nom de classe 'text1' qui contient du texte. Nous avons défini la taille de la police du texte en CSS. De plus, pour ajouter un effet de contour au texte, nous définissons une couleur de remplissage blanche, une largeur de trait de « 1 px » et une couleur de trait « bleu » pour afficher un contour bleu.

Dans la sortie, l'utilisateur peut observer le texte avec un contour bleu. 

<html>
<head>
   <style>
      .text1 {
         font-size: 50px;
         -webkit-text-fill-color: white;
         -webkit-text-stroke-width: 1px;
         -webkit-text-stroke-color: blue;
      }
   </style>
</head>
<body>
   <h2>Using the <i> different CSS properties </i> to add outline effect on the text.</h2>
   <div class = "text1">This text has a default background.</div>
</body>
</html>

Exemple 2

se traduit par :

Exemple 2

Dans l'exemple ci-dessous, nous avons défini un fond rouge pour l'élément div. Ensuite, nous utilisons « rouge » comme couleur de remplissage, ce qui rend la couleur de remplissage identique à celle de l'arrière-plan. Ici, la largeur du trait est « 1,2 px » et la couleur du trait est « jaune ».

Dans la sortie, l'utilisateur peut observer le texte avec un contour jaune sur fond rouge. 

<html>
<head>
   <style>
      .text {
         font-size: 50px;
         width: 600px;
         height: auto;
         background-color: red;
         -webkit-text-fill-color: red;
         -webkit-text-stroke-width: 1.2px;
         -webkit-text-stroke-color: yellow;
      }
   </style>
</head>
<body>
   <h2>Using the <i> different CSS properties </i> to add outline effect on the text</h2>
   <div class = "text"> This text has a red background. </div>
</body>
</html>

Utilisez la propriété CSS « ​​Text-shadow »

Dans cette méthode, nous utiliserons la propriété CSS « ​​text-shadow » pour générer un effet de contour pour le texte. Si nous masquons le texte en définissant la même couleur de texte que la couleur d'arrière-plan et en affichant uniquement l'ombre du texte, nous pouvons générer un effet de contour.

Grammaire

Les utilisateurs peuvent utiliser la propriété CSS « ​​text-shadow » pour ajouter un effet de contour au texte en suivant la syntaxe suivante. 

text-shadow: x-offset y-offset blur color;

La propriété "text-shadow" prend 4 valeurs différentes pour définir l'ombre. Le premier est le décalage x, le deuxième est le décalage y, le troisième est la valeur de flou et le quatrième est la couleur de l'ombre.

Exemple 3

Vous pouvez le conserver sans traduction

Dans l'exemple ci-dessous, l'élément div contient du texte. En CSS, nous définissons la couleur d’arrière-plan et la couleur de la police pour qu’elles soient identiques. Ensuite, nous avons utilisé la propriété CSS 'text-shadow' pour ajouter l'effet de contour. Ici, nous avons utilisé des valeurs 4 contre 4 pour la valeur 'text-shadow'. La première paire est pour l'ombre droite, la deuxième paire est pour l'ombre inférieure, la troisième paire est pour l'ombre gauche et la dernière paire est pour l'ombre supérieure.

En fait, il affiche l'ombre du texte au lieu du trait, créant ainsi un effet de contour. 

<html>
<head>
   <style>
      .text {
         color: rgb(117, 117, 235);
         font-size: 50px;
         background-color: rgb(117, 117, 235);
         text-shadow: -1px -1px 2px red, 1px -1px 2px red, -1px 1px 2px red, 1px 1px 2px red;
      }
   </style>
</head>
<body>
   <h2>Using the <i> text-shadow CSS property </i> to add outline effect on the text</h2>
   <div class = "text"> Welcome to the TutorialsPoint! </div>
</body>
</html>

Ajoutez du texte à l'intérieur de la balise et appliquez un trait au texte

Ici, nous convertissons le texte en image SVG. Après cela, nous définirons la couleur du trait, la couleur de remplissage, la largeur du trait, etc., et utiliserons diverses propriétés CSS pour ajouter un effet de contour au texte.

Grammaire

Les utilisateurs peuvent suivre la syntaxe suivante pour convertir le texte en SVG afin d'ajouter un effet de contour au texte. 

paint-order: stroke;
fill: color;
stroke: color;

Dans la syntaxe ci-dessus, nous définissons la couleur de remplissage du texte. De plus, nous définissons la couleur du trait du texte. La propriété CSS « ​​paint-order: Stroke » nous permet de superposer les couleurs de remplissage via des traits lorsque les couleurs de remplissage se croisent.

La traduction chinoise de

Exemple 4

est :

Exemple 4

Dans l'exemple ci-dessous, nous avons utilisé la balise HTML pour créer un élément HTML et la balise HTML pour ajouter du texte dans le SVG. Dans le CSS, nous définissons « Stroke-width » sur 3px pour afficher un contour de 3px, et « Stroke-linejoin » pour arrondir afin que chaque fois que deux lignes se connectent, elles se rejoignent en cercle. De plus, nous utilisons « fill: white » pour définir la couleur du texte sur la même couleur que l'arrière-plan, et « Stroke » pour afficher le texte sous forme de contour marron. 

<html>
<head>
   <style>
      svg {
         font-size: 35px;
         width: 490px;
         height: 100;
      }
      .text {
         stroke-width: 3px;
         stroke-linejoin: round;
         paint-order: stroke;
         fill: white;
         stroke: brown;
      }
   </style>
</head>
<body>
   <h2>Using the <i> SVG text </i> to add outline effect on the text</h2>
   <svg viewBox = "0 0 490 100">
      <text class = "text" x = "10" y = "45"> This text is in the svg element </text>
   </svg>
</body>
</html>

Nous avons vu trois façons d’ajouter un effet de contour au texte. La première méthode utilise trois propriétés CSS différentes pour modifier la couleur de remplissage du texte et définir le contour du texte.

La deuxième méthode affiche "l'ombre du texte" au lieu d'afficher le texte. La troisième méthode convertit le texte en SVG et ajoute un effet de contour au texte à l'aide de diverses propriétés CSS liées au SVG.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css html webkit
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment sélectionner plusieurs fichiers à l'aide des balises d'entrée HTML ?Article suivant：Comment sélectionner plusieurs fichiers à l'aide des balises d'entrée HTML ?

Articles Liés

Voir plus