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

Maison

interface Web

tutoriel CSS

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

不言

Nov 12, 2018 am 09:59 AM

ombre du texte

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 connexe

Qu'est-ce que CSS Grid?Apr 30, 2025 pm 03:21 PM

CSS Grid est un outil puissant pour créer des dispositions Web complexes et réactives. Il simplifie la conception, améliore l'accessibilité et offre plus de contrôle que les méthodes plus anciennes.

Qu'est-ce que CSS Flexbox?Apr 30, 2025 pm 03:20 PM

L'article traite de CSS Flexbox, une méthode de mise en page pour l'alignement et la distribution efficaces de l'espace dans les conceptions réactives. Il explique l'utilisation de Flexbox, la compare à la grille CSS et détaille la prise en charge du navigateur.

Comment pouvons-nous rendre notre site Web réactif à l'aide de CSS?Apr 30, 2025 pm 03:19 PM

L'article traite des techniques de création de sites Web réactifs à l'aide de CSS, y compris des balises de méta de la fenêtre, des grilles flexibles, des médias fluides, des requêtes multimédias et des unités relatives. Il couvre également l'utilisation de la grille CSS et de Flexbox ensemble et recommande le cadre CSS

Que fait la propriété CSS Box-Sizizing?Apr 30, 2025 pm 03:18 PM

L'article traite de la propriété CSS-Box-Sizing, qui contrôle comment les dimensions des éléments sont calculées. Il explique des valeurs telles que la boîte de contenu, la boîte de bordure et la boîte de padding, et leur impact sur la conception de la disposition et l'alignement de la forme.

Comment pouvons-nous animer à l'aide de CSS?Apr 30, 2025 pm 03:17 PM

L'article discute de la création d'animations à l'aide de CSS, de propriétés clés et de combinaison avec JavaScript. Le principal problème est la compatibilité du navigateur.

Pouvons-nous ajouter des transformations 3D à notre projet en utilisant CSS?Apr 30, 2025 pm 03:16 PM

L'article discute de l'utilisation de CSS pour les transformations 3D, les propriétés clés, la compatibilité du navigateur et les considérations de performances pour les projets Web. (Compte de caractère: 159)

Comment pouvons-nous ajouter des gradients dans CSS?Apr 30, 2025 pm 03:15 PM

L'article discute de l'utilisation des gradients CSS (linéaire, radial, répétant) pour améliorer les visuels du site Web, l'ajout de profondeur, de concentration et d'esthétique moderne.

Que sont les pseudo-éléments dans CSS?Apr 30, 2025 pm 03:14 PM

L'article traite des pseudo-éléments dans CSS, de leur utilisation dans l'amélioration du style HTML et des différences par rapport aux pseudo-classes. Fournit des exemples pratiques.

See all articles