Maison > interface Web > tutoriel CSS > le corps du texte

Comment ajouter des traits aux polices en CSS

醉折花枝作酒筹
Libérer: 2023-01-06 11:15:51
original
18943 Les gens l'ont consulté

La méthode pour ajouter un trait à la police est la suivante : 1. Utilisez l'attribut text-shadow, le format de syntaxe est "text-shadow : ombre horizontale ombre verticale couleur du rayon de flou" 2. Utilisez le texte- ; attribut de trait, le format de syntaxe est « texte-trait : couleur de largeur de trait ».

Comment ajouter des traits aux polices en CSS

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Si vous souhaitez utiliser CSS pour ajouter un effet de trait au texte, il existe deux méthodes principales : utilisez l'attribut text-shadow ou l'attribut text-stroke.

Méthode 1 : Utiliser la propriété text-shadow

La propriété text-shadow est utilisée pour ajouter une bordure de police ou une ombre au texte.

Syntaxe :

text-shadow: h-shadow v-shadow blur-radius color|none;
Copier après la connexion

Valeur de l'attribut :

  • h-shadow : Il définit une ombre horizontale autour de la police.

  • v-shadow : Il définit l'ombre verticale autour de la police.

  • blur-radius : définissez le rayon de flou autour de la police.

  • color : Il définit la couleur autour de la police.

  • aucun : il ne définit rien autour de la police.

Exemple 1 : Utiliser la propriété text-shadow pour créer une ombre pour le texte

nbsp;html>

  
    <meta>
    <style>
      h1 {
        text-shadow: 0 0 5px #5eff79, 0 0 5px #ff5a5a;
      }
      h2 {
        text-shadow: 0 0 5px #ffd45e, 0 0 5px #af5aff;
      }
    </style>
  
  
    <h1>为你明灯三千</h1>
    <h2>为你花开满城</h2>
  
Copier après la connexion

Rendu :

Comment ajouter des traits aux polices en CSS

Exemple 2 :

nbsp;html>

  
    <meta>
    <style>
      .demo1 {
        color: white;
        font-size: 40px;
        text-shadow: -1px 1px 0 #000, 1px 1px 0 #000;
      }
      .demo2 {
        color: white;
        font-size: 40px;
        text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000,
          -1px -1px 0 #000;
      }
    </style>
  

  
    <p>为你明灯三千</p>
    <p>为你花开满城</p>
  
Copier après la connexion

Rendu :

Comment ajouter des traits aux polices en CSS

Méthode 2 : Utiliser l'attribut text-stroke

text La propriété -Stroke est utilisée pour ajouter un trait au texte. Cette propriété peut être utilisée pour modifier la largeur du trait et la couleur du texte. Cette propriété est prise en charge à l'aide du préfixe -webkit-.

Exemple :

nbsp;html>

  
    <meta>
    <style>
      .demo {
        color: white;
        font-size: 40px;
        -webkit-text-stroke: 1px rgb(250, 190, 255);
      }
    </style>
  

  
    <p>为你明灯三千</p>
  
Copier après la connexion

Rendu :

Comment ajouter des traits aux polices en CSS

Apprentissage recommandé : Tutoriel vidéo CSS

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!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal