Maison >interface Web >tutoriel CSS >Méthode CSS pour implémenter l'ombre du texte (exemple de code)

Méthode CSS pour implémenter l'ombre du texte (exemple de code)

不言original: 2018-11-12 09:59:153109parcourir

CSS peut produire de nombreux effets, cet article vous présentera donc le code permettant d'utiliser CSS pour afficher l'ombre de texte. L'attribut que nous utilisons pour implémenter l'ombre de texte en CSS est l'attribut text-shadow. ci-dessous.

Format de syntaxe :

text-shadow : (distance dans la direction x) (distance dans la direction y) (taille du flou) (couleur de l'ombre)

Vous pouvez également utiliser ; Des virgules séparent plusieurs ombres : (Recommandations associées : Manuel en ligne CSS3)

Ombre du texte : (Distance de l'ombre 1 dans la direction x) (Distance de l'ombre 1 dans la direction y) (Taille du flou de l'ombre 1) (Ombre 1 couleur), (Ombre 2 x direction distance) (Ombre 2 y direction distance) (Ombre 2 flou) (Ombre 2 couleur),..., (Ombre nx direction distance) (Ombre n'importe quelle direction distance) (Ombre n taille du flou) (couleur de l'ombre n) ; 🎜>

Créez les fichiers CSS, HTML suivants.

TextShadow.css

 text-shadow: 2px 2px 1px #808080;

  text-shadow: 4px 6px 2px blue;

 text-shadow: 3px 3px 1px gray, 8px -6px 2px #30E0C0;

TextShadow.html

Afficher les résultats

Lorsqu'un navigateur Web affiche le fichier HTML ci-dessus, il être affiché L'effet est illustré ci-dessous.

p.ShadowText{    
text-shadow: 5px 5px 2px #808080;
}

Exemple 2 :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="TextShadow.css" />
    <title></title>
    </head>
    <body>
    <p class="ShadowText">文字阴影效果</p>
    </body>
    </html>

Créez les fichiers CSS, HTML suivants.

TextShadow.css

TextShadow.html Méthode CSS pour implémenter lombre du texte (exemple de code)

Afficher les résultats

Lorsqu'un navigateur Web affiche le fichier HTML ci-dessus, il être affiché L'effet présenté ci-dessous

p.ShadowText2 {
    font-size:18px;    
    font-weight:700;    
    text-shadow: 2px 2px 1px #E0E0E0;
}

Exemple 3 : lors de l'affichage de plusieurs ombres

Créez les fichiers CSS et HTML suivants.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="TextShadow.css" />
    <title></title>
    </head>
    <body>
    <p class="ShadowText2">文字阴影效果</p>
    </body>
    </html>

TextShadow.css

TextShadow.html

Méthode CSS pour implémenter lombre du texte (exemple de code)

Afficher les résultats

Lorsqu'un navigateur Web affiche le fichier HTML ci-dessus, il être affiché L'effet montré ci-dessous

p.ShadowText3 {
    font-size: 24px;    
    font-weight: 700;    
    text-shadow: 8px 8px 1px #A0A0A0, 24px 24px 6px #A0A0F0;
}

Exemple 4 : Plus d'ombres

Créez les fichiers CSS, HTML suivants.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="TextShadow.css" />
    <title></title>
    </head>
    <body>
    <p class="ShadowText3">文字阴影效果</p>
    </body>
    </html>

TextShadow.css

TextShadow.html

Méthode CSS pour implémenter lombre du texte (exemple de code)

Afficher les résultats

Lorsqu'un navigateur Web affiche le fichier HTML ci-dessus, il être affiché L'effet est illustré ci-dessous.

p.ShadowText4 {
    font-size: 24px;    
    font-weight: 700;    
    text-shadow: 8px 8px 1px #A0A0A0, 24px 24px 6px #A0A0F0, 36px 36px 2px #ff6a00, 48px 24px 2px #99ff70;
}

Ce qui précède représente l'intégralité du contenu de cet article. Pour un contenu plus passionnant sur CSS, vous pouvez prêter attention à la colonne

Tutoriel vidéo CSS3

du. php site chinois ! ! !

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="TextShadow.css" />
    <title></title></head><body>
    <p class="ShadowText4">文字阴影效果</p>
    </body>
    </html>

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!

Déclaration：

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

Article précédent：Comment implémenter l’effet bulle de discussion en CSS3 ? (exemple de code)Article suivant：Comment implémenter l’effet bulle de discussion en CSS3 ? (exemple de code)

Articles Liés

Voir plus