Maison > Article > interface Web > Comment utiliser la propriété text-shadow de CSS3

Comment utiliser la propriété text-shadow de CSS3

php中世界最好的语言original: 2018-01-22 10:47:461953parcourir

Cette fois, je vais vous expliquer comment utiliser l'attribut text-shadow text-shadow de CSS3, et que faut-il noter lors de l'utilisation de l'attribut text-shadow de CSS3. Voici des cas réels.

Effets spéciaux d'attribut ombre de texte d'ombre de texte :

1. Ombre du coin inférieur droit, ombre du coin inférieur gauche, ombre du coin supérieur gauche, ombre du coin supérieur droit

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>text-shadow</title>  
    <style>  
        p{   
          text-align:center;   
          margin:0;   
          font-family: helvetica,arial,sans-serif;   
          color:#999;   
          font-size:80px;   
          font-weight:bold;   
          text-shadow:10px 10px #333;   
        }   
    </style>  
</head>  
<body>  
    <p>Text Shadow</p>  
</body>  
</html>

Si vous changez le texte - Remplacez l'ombre par : text-shadow:-10px 10px #333, et l'ombre dans le coin inférieur gauche apparaîtra

Changez text-shadow par : text-shadow:-10px -10px #333, et l'ombre dans le coin supérieur gauche apparaîtra

Remplacez text-shadow par : text-shadow : 10px -10px #333, et l'ombre dans le coin supérieur droit apparaîtra

2. Utilisez text-shadow pour définir l'effet de texte tridimensionnel

<!DOCTYPE html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title>text-shadow</title>  
     <style>  
         p{   
           text-align:center;   
           margin:0;   
           font-family: helvetica,arial,sans-serif;   
           color:#999;   
           font-size:80px;   
           font-weight:bold;   
           text-shadow:-1px -1px #fff,   
                                    1px 1px #333;   
         }   
     </style>  
 </head>  
 <body>  
     <p>Text Shadow</p>  
 </body>  
 </html>

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur. le site php chinois !

Lecture connexe :

Exemples détaillés de formatage de texte HTML

Résumé des balises fréquemment utilisées en HTML

Comment centrer verticalement l'image et la durée dans p

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!

php css3 html

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：Quels sont les styles courants des pages HTML ?Article suivant：Quels sont les styles courants des pages HTML ?

Articles Liés

Voir plus