La propriété text-shadow dans CSS2 facilite l'ajout d'ombres au texte dans les pages Web, mais jusqu'à présent, seul Safari sur OS X la prend en charge. Aujourd'hui, nous allons créer des effets d'ombre de texte CSS pour d'autres navigateurs, y compris Firefox, et pouvons le faire. passer la vérification w3.
La propriété text-shadow, qui fait l'objet de discussions depuis des années, vous permet de contrôler la couleur, le décalage et le flou des ombres sur les éléments de la page. Bien qu'elle ne soit pas encore largement prise en charge, certains concepteurs ont commencé à décider d'utiliser le texte CSS. propriété d'ombres partout. Bien que cela ne soit conçu que pour améliorer les fonctionnalités d’un petit nombre d’utilisateurs.
Ce qui suit est un exemple Lorsque vous l'utilisez, faites attention à la position:relative of a et à la position:absoluteview plaincopy to clipboardprint?
<style>
ul,li{ margin:0px; padding:0px;list-style-type : aucun;}
#nav{font-family : Verdana, "宋体", Arial ;}
#nav li{ float:gauche; marge-gauche:30px;}
#nav span{display:none;}
#nav a{font-size:12px;font-weight: bold;color: #FF6600;text-decoration: none;
#nav a:hover{ couleur:#999;top:1px gauche:1px; position:relative;}
#nav a:hover span{ display:block; top:-2px; position:absolute;
</style>
<style>
ul,li{ margin:0px; padding:0px;list-style-type : aucun;}
#nav{font-family : Verdana, "宋体", Arial ;}
#nav li{ float:gauche; marge-gauche:30px;}
#nav span{display:none;}
#nav a{font-size:12px;font-weight: bold;color: #FF6600;text-decoration: none;
#nav a:hover{ couleur:#999;top:1px gauche:1px; position:relative;}
#nav a:hover span{ display:block; top:-2px; position:absolute;
</style>afficher la copie ordinaire dans le presse-papiers ?
<div id="nav">
<ul>
<li><a href="#">Page d'accueil du site Web<span>Page d'accueil du site Web</span></a></li>
<li><a href="#">Page d'accueil du site Web<span>Page d'accueil du site Web</span></a></li>
<li><a href="#">Page d'accueil du site Web<span>Page d'accueil du site Web</span></a></li>
<li><a href="#">Page d'accueil du site Web<span>Page d'accueil du site Web</span></a></li>
<li><a href="#">Page d'accueil du site Web<span>Page d'accueil du site Web</span></a></li>
</ul>
</div>