The text-shadow property in CSS2 makes it easy to add shadows to text in web pages, but so far only Safari on OS X supports it. Today, we’ll create CSS text shadow effects for other browsers, including Firefox. , and can pass w3 verification.
The text-shadow property, which has been discussed for years, allows you to control the color, offset, and blur of shadows on page elements. Although it is not yet widely supported, some designers have begun to decide to use the CSS text-shadows property everywhere. . Although this is only designed to enhance functionality for a small number of users.
The following is an example. When using it, pay attention to the position:relative of a and the position:absoluteview plaincopy to clipboardprint?
<style>
ul,li{ margin:0px; padding:0px;list-style-type: none;}
#nav{font-family: Verdana, "宋体", Arial;}
#nav li{ float:left; margin-left:30px;}
#nav span{display:none;}
#nav a{font-size:12px;font-weight: bold;color: #FF6600;text-decoration: none; display:block;}
#nav a:hover{ color:#999;top:1px; left:1px; position:relative;}
#nav a:hover span{ display:block; top:-2px; left:-2px; position:absolute; color:#FF3300;cursor:pointer;}
</style>
<style>
ul,li{ margin:0px; padding:0px;list-style-type: none;}
#nav{font-family: Verdana, "宋体", Arial;}
#nav li{ float:left; margin-left:30px;}
#nav span{display:none;}
#nav a{font-size:12px;font-weight: bold;color: #FF6600;text-decoration: none; display:block;}
#nav a:hover{ color:#999;top:1px; left:1px; position:relative;}
#nav a:hover span{ display:block; top:-2px; left:-2px; position:absolute; color:#FF3300;cursor:pointer;}
</style>view plaincopy to clipboardprint?
<div id="nav">
<ul>
<li><a href="#">Website homepage<span>Website homepage</span></a></li>
<li><a href="#">Website homepage<span>Website homepage</span></a></li>
<li><a href="#">Website homepage<span>Website homepage</span></a></li>
<li><a href="#">Website homepage<span>Website homepage</span></a></li>
<li><a href="#">Website homepage<span>Website homepage</span></a></li>
</ul>
</div>