Méthode CSS pour implémenter l'ombre du texte (exemple de code)-tutoriel CSS-php.cn

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

不言

Libérer： 2018-11-12 09:59:15

original

3115 Les gens l'ont consulté

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;

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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!