La propiedad text-shadow en CSS2 facilita la adición de sombras al texto en páginas web, pero hasta ahora solo Safari en OS X la admite. Hoy crearemos efectos de sombra de texto CSS para otros navegadores, incluido Firefox, y podemos. pasar la verificación w3.
La propiedad text-shadow, que se ha discutido durante años, le permite controlar el color, el desplazamiento y el desenfoque de las sombras en los elementos de la página. Aunque todavía no cuenta con un soporte generalizado, algunos diseñadores han comenzado a decidir utilizar la propiedad text-shadow. Propiedad de sombras por todas partes. Aunque esto sólo está diseñado para mejorar la funcionalidad para un pequeño número de usuarios.
El siguiente es un ejemplo. Al usarlo, preste atención a la posición: relativa de a y la posición: vista absoluta ¿copia simple al portapapeles?
<estilo>
ul,li{ margen:0px; relleno:0px;tipo-estilo de lista: ninguno;}
#nav{font-family: Verdana, "宋体", Arial;}
#nav li{ float:izquierda; margen izquierdo:30px;}
#nav span{display:none;}
#nav a{font-size:12px;font-weight: negrita;color: #FF6600;text-decoration: none; display:block;}
#nav a:hover{ color:#999;arriba:1px; izquierda:1px; posición:relativa;}
#nav a:hover span{ display:bloque; arriba:-2px; posición:absoluta;cursor:puntero;}
</estilo>
<estilo>
ul,li{ margen:0px; relleno:0px;tipo-estilo de lista: ninguno;}
#nav{font-family: Verdana, "宋体", Arial;}
#nav li{ float:izquierda; margen izquierdo:30px;}
#nav span{display:none;}
#nav a{font-size:12px;font-weight: negrita;color: #FF6600;text-decoration: none; display:block;}
#nav a:hover{ color:#999;arriba:1px; izquierda:1px; posición:relativa;}
#nav a:hover span{ display:bloque; arriba:-2px; posición:absoluta;cursor:puntero;}
</style>¿ver copia simple en el portapapeles?
<div id="navegación">
<ul>
<li><a href="#">Página de inicio del sitio web<span>Página de inicio del sitio web</span></a></li>
<li><a href="#">Página de inicio del sitio web<span>Página de inicio del sitio web</span></a></li>
<li><a href="#">Página de inicio del sitio web<span>Página de inicio del sitio web</span></a></li>
<li><a href="#">Página de inicio del sitio web<span>Página de inicio del sitio web</span></a></li>
<li><a href="#">Página de inicio del sitio web<span>Página de inicio del sitio web</span></a></li>
</ul>
</div>