Comment utiliser CSS3 pour obtenir un effet d'ombre unique et un effet d'ombre multiple du texte (code complet joint)-tutoriel CSS-php.cn

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

4957 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

Décalage horizontal, la valeur positive va vers la droite, la valeur négative va vers la gauche.
Décalage vertical, la valeur positive diminue, la valeur négative monte.
Flou, ne peut pas être négatif.
La couleur de l'ombre.
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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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