A propriedade text-shadow em CSS2 facilita a adição de sombras ao texto em páginas da web, mas até agora apenas o Safari no OS X oferece suporte. Hoje, criaremos efeitos de sombra de texto CSS para outros navegadores, incluindo o Firefox, e podemos. passar na verificação w3.
A propriedade text-shadow, que tem sido discutida há anos, permite controlar a cor, o deslocamento e o desfoque das sombras nos elementos da página. Embora ainda não seja amplamente suportada, alguns designers começaram a decidir usar o CSS text-. propriedade de sombras em todos os lugares. Embora isso seja projetado apenas para aprimorar a funcionalidade para um pequeno número de usuários.
A seguir está um exemplo ao usá-lo, preste atenção ao position:relative de a e ao position:absoluteview plaincopy to clipboardprint?
<estilo>
ul,li{margem:0px; preenchimento:0px;tipo de estilo de lista: nenhum;}
#nav{família de fontes: Verdana, "宋体", Arial;}
#nav li{ float:esquerda;margem esquerda:30px;}
#nav span{display:none;}
#nav a{tamanho da fonte:12px;peso da fonte: negrito;cor: #FF6600;decoração do texto: nenhum;
#nav a:hover{ color:#999;top:1px; left:1px posição:relativo;}
#nav a:hover span{ display:block;cursor:ponteiro;}
</estilo>
<estilo>
ul,li{margem:0px; preenchimento:0px;tipo de estilo de lista: nenhum;}
#nav{família de fontes: Verdana, "宋体", Arial;}
#nav li{ float:esquerda;margem esquerda:30px;}
#nav span{display:none;}
#nav a{tamanho da fonte:12px;peso da fonte: negrito;cor: #FF6600;decoração do texto: nenhum;
#nav a:hover{ color:#999;top:1px; left:1px posição:relativo;}
#nav a:hover span{ display:block;cursor:ponteiro;}
</style>visualizar cópia simples para impressão da área de transferência?
<div id="nav">
<ul>
<li><a href="#">Página inicial do site<span>Página inicial do site</span></a></li>
<li><a href="#">Página inicial do site<span>Página inicial do site</span></a></li>
<li><a href="#">Página inicial do site<span>Página inicial do site</span></a></li>
<li><a href="#">Página inicial do site<span>Página inicial do site</span></a></li>
<li><a href="#">Página inicial do site<span>Página inicial do site</span></a></li>
</ul>
</div>