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>L'effet est comme indiqué sur la figure
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>L'effet est comme indiqué sur la figure
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!
tutoriel CSS3
Quelles sont les propriétés du dégradé CSS3 ?
Les dernières nouvelles officielles d'aujourd'hui concernant PaiCoin sont vraies
La différence entre MongoDB et MySQL
Tendances récentes du marché de Ripple
Que sont les bibliothèques d'intelligence artificielle Python ?
Comment obtenir l'heure actuelle en JAVA
Introduction aux composants Laravel
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
