简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel CSS > le corps du texte

Comment utiliser la propriété CSS Text-Stroke pour créer un trait de texte ? (code source)

云罗郡主
Libérer： 2018-10-26 14:33:57
original
5341 Les gens l'ont consulté

Beaucoup de gens ne savent pas comment utiliser l'attribut CSS text-stroke pour tracer le texte sur la page. En fait, c'est aussi une chose très simple d'utiliser l'attribut textshadow pour tracer le texte. l'attribut CSS Text-Stroke pour créer un côté ombre de texte ? Résumons les propriétés de textshadow ci-dessous.

1 : attribut textshadow :

Beaucoup de gens utilisent text-stroke en CSS pour tracer du texte. En fait, pour tracer une ligne de texte, il s'agit en fait d'ajouter un. bordure à une ligne de texte.

2 : Utilisation de la syntaxe de trait de texte :

trait de texte : valeur de largeur valeur de couleur

Explication :

Dans En fait, Text-Stroke est une syntaxe conforme et se compose de deux sous-propriétés : la valeur de largeur et la valeur de couleur.

1. Explication de l'attribut Text-stroke-width : Définissez la largeur de la bordure. Généralement, nous pouvons l'exprimer par la longueur.

2. Explication de l'attribut Text-stroke-color : Généralement, nous. définir la couleur de la bordure

Trois : Exemple d'utilisation de l'attribut text-stroke : 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 text-stroke属性</title>
    <style type="text/css">
        div
        {
            font-size:30px;
            font-weight:bold;
        }
        #div2
        {
             text-stroke:1px red;
             -webkit-text-stroke:1px red;
             -moz-text-stroke:1px red;
             -o-text-stroke:1px red;
        }
    </style>
</head>
<body>
    <div id="div1">我没有被描边</div>
    <div id="div2">我被描边1像素的红色的边</div>
</body>
</html>
Copier après la connexion

L'effet du code ci-dessus est le suivant :

Comment utiliser la propriété CSS Text-Stroke pour créer un trait de texte ? (code source)

Si vous pensez qu'il n'est pas très couramment utilisé dans les exemples d'applications, mais que nous pouvons l'utiliser avec d'autres attributs, beaucoup de gens aiment l'utiliser avec color:transparent, par exemple : <. 🎜>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 text-stroke属性</title>
    <style type="text/css">
        div
        {
            font-family:Verdana;
            font-size:50px;
            font-weight:bold;
            color:transparent;  /*设置文字颜色为透明*/
            text-stroke:2px red;
            -webkit-text-stroke:2px #45B823;
            -moz-text-stroke:2px #45B823;
        }
    </style>
</head>
<body>
    <div>php中文网</div>
</body>
</html>
Copier après la connexion
L'effet est tel qu'indiqué ci-dessous :

Comment utiliser la propriété CSS Text-Stroke pour créer un trait de texte ? (code source)

Ce qui précède est une introduction complète à la façon d'utiliser l'attribut CSS Text-Stroke pour créer des traits de texte. . Si vous souhaitez en savoir plus sur le

Tutoriel vidéo CSS, veuillez suivre le site Web php chinois.


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：
text-stroke 制作文字描边
source：php.cn
Article précédent：Comment flouter l’image d’arrière-plan avec CSS ? Introduction à la méthode de floutage des images d'arrière-plan en CSS Article suivant：Quelle est la différence entre le retour à la ligne et le débordement de texte ? Explication détaillée de deux propriétés
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
Derniers articles par auteur
Derniers numéros
MySQL : "Sélectionnez le texte de... comme <variable ici ou sous-requête>" J'ai le tableau suivant avec les données suivantes : id texte langue 1 texte allemand alle...
Depuis 2024-04-06 19:25:54
0
2
529
Impossible d'obtenir l'élément d'entrée du site Web J'essaie donc d'obtenir un élément d'entrée de Twitter mais lorsque je l'exécute, cela con...
Depuis 2024-04-06 18:59:57
0
1
442
Aligner l'info-bulle sur le parent relatif J'ai passé deux jours à essayer de résoudre ce problème mais j'ai réalisé que je ne pouvai...
Depuis 2024-04-06 13:16:59
0
2
394
Afficher un élément après un bloc de nouvelle ligne J'ai actuellement ceci : je veux mettre l'icône div à la fin du texte, mais comme c'est un...
Depuis 2024-04-04 21:45:21
0
1
271
Menu déroulant central dans la barre de navigation Utilisez CSS/HTML.navbar{width:100%;background-color:rgb(151,44,44);overflow:auto;}.navbar...
Depuis 2024-04-04 18:24:52
0
1
338
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！