Maison > Article > interface Web > Comment obtenir un effet d'ombre de texte CSS3 ? [Explication détaillée du code]
Le mot ombre de texte peut sembler un peu inconnu aux novices qui découvrent CSS, alors disons-le autrement, un texte avec une sensation tridimensionnelle. Certaines images apparaissent-elles immédiatement dans votre esprit ? Si vous avez lu mon article précédent [Explication détaillée de la façon de créer des effets d'ombre en CSS3], vous devriez avoir une certaine compréhension de l'effet d'ombre div. Cet attribut principal est l'attribut de style box-shadow.
Ensuite, cet article continuera à vous présenter comment créer un effet d'ombre de texte en CSS3, c'est-à-dire comment créer une police 3D. Le principal attribut à maîtriser ici est le attribut de style text-shadow Certains débutants peuvent se demander ce qu'est text-shadow ? Quelle est la signification ? Comment utiliser ? Ne vous inquiétez pas, nous l'expliquerons en détail ci-dessous avec un exemple de code spécifique.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3 text-shadow属性使用示例</title> <style> .t1{ text-shadow: 5px 5px 5px #029789; font-size: 40px; font-weight: bold; color: white; } .t2{ text-shadow: -5px -5px 5px #1094f2; font-size: 40px; font-weight: bold; color: white; } </style> </head> <body> <div class="demo"> <p class="t1">text-shadow属性使用示例1-文字阴影效果</p> <p class="t2">text-shadow属性使用示例2-文字阴影效果</p> </div> </body> </html>Nous accédons au code ci-dessus via un navigateur, et l'effet est le suivant :
attribut CSS text-shadow, c'est-à-dire une introduction détaillée sur la façon de donner à la police un effet 3D. Il a une certaine valeur de référence et j'espère qu'il sera utile à des amis dans le besoin.
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!