Qu'est-ce que l'effet de contour du texte ?-tutoriel CSS-php.cn

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

WBOY

Libérer： 2023-08-23 21:25:02

avant

1319 Les gens l'ont consulté

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;

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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;

Copier après la connexion

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>

Copier après la connexion

Ajoutez du texte à l'intérieur de la balise

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;

Copier après la connexion

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

<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>

Copier après la connexion

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!