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

Comment utiliser CSS3 pour obtenir un effet d'ombre unique et un effet d'ombre multiple du texte (code complet joint)

坏嘻嘻
Libérer: 2018-09-28 11:54:08
original
4947 Les gens l'ont consulté

Ces dernières années, dans le processus de développement de pages Web, de plus en plus d'attention a été accordée à l'interaction homme-machine et à l'expérience utilisateur. Non seulement les couleurs sont plus diversifiées, mais les divers effets spéciaux sont également vertigineux. Aujourd'hui, je vais principalement vous présenter comment obtenir l'effet spécial de l'ombre dans le texte. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Le principe de l'utilisation de CSS3 pour obtenir un effet d'ombre de texte

Pour obtenir un effet d'ombre, nous utilisons principalement l'attribut text-shadow Selon. Normes W3C, si nous voulons être compatible avec l'attribut shadow CSS3 sous IE, vous pouvez utiliser ie.css3-htc. Cependant, selon la norme, Internet Explorer 9 et les navigateurs antérieurs ne prennent actuellement pas en charge l'attribut text-shadow. La syntaxe la plus basique est la suivante : text-shadow : h-shadow v-shadow blur color ;

paramètre d'attribut text-shadow

  1. Décalage horizontal, la valeur positive va vers la droite, la valeur négative va vers la gauche.

  2. Décalage vertical, la valeur positive diminue, la valeur négative monte.

  3. Flou, ne peut pas être négatif.

  4. La couleur de l'ombre.

  5. L'attribut text-shadow a une autre fonctionnalité : obtenir un effet d'éclat du texte. Pour plus de détails, veuillez vous référer à d'autres articles sur ce site :

    Comment utiliser CSS3 pour obtenir un effet d'éclat interne de la police (explication détaillée)

Utilisez CSS3 pour implémenter une seule ombre de texte

<!DOCTYPE html>
<html>
<head>
    <title>单个阴影</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        ul>li:nth-child(odd) {
            text-shadow: 2px 2px 1px red;
        }
    </style>
</head>
<body>
    <ul>
        <li>PHP中文网</li>
        <li>PHP中文网</li>
        <li>PHP中文网</li>
        <li>PHP中文网</li>
    </ul>
</body>
</html>
Copier après la connexion

L'effet est comme indiqué sur la figure

Comment utiliser CSS3 pour obtenir un effet dombre unique et un effet dombre multiple du texte (code complet joint)

Utilisez CSS3 pour implémenter plusieurs ombres de texte

<!DOCTYPE html>
<html>
<head>
    <title>多个阴影</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        ul>li:nth-child(odd) {
            text-shadow: 2px 2px 1px red, 10px 2px 1px blue;
        }
    </style>
</head>
<body>
    <ul>
        <li>PHP中文网</li>
        <li>PHP中文网</li>
        <li>PHP中文网</li>
        <li>PHP中文网</li>
        <li>PHP中文网</li>
        <li>PHP中文网</li>
        <li>PHP中文网</li>
        <li>PHP中文网</li>
    </ul>
</body>
</html>
Copier après la connexion

L'effet est comme indiqué sur la figure

Comment utiliser CSS3 pour obtenir un effet dombre unique et un effet dombre multiple du texte (code complet joint)

Résumé : L'attribut text-shadow peut non seulement donner au texte un effet d'ombre, mais peut également créer plusieurs effets d'ombre s'ils sont séparés par des virgules. Il peut être utilisé dans le développement frontal quotidien. C'est très pratique dans le processus. Dans les articles suivants, je vais vous montrer comment ajouter des effets d'ombre aux images, comment utiliser le texte. attribut d'ombre pour créer des effets de texte brillants, etc., alors restez à l'écoute de votre attention.

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:
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
À 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!