Comment utiliser la propriété text-shadow de CSS3-tutoriel HTML-php.cn

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

php中世界最好的语言

Libérer： 2018-01-22 10:47:46

original

2034 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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!