Die text-shadow-Eigenschaft in CSS2 erleichtert das Hinzufügen von Schatten zu Text in Webseiten, aber bisher wird dies nur von Safari unter OS X unterstützt. Heute erstellen wir CSS-Textschatteneffekte für andere Browser, einschließlich Firefox Bestehen Sie die W3-Überprüfung.
Mit der seit Jahren diskutierten Text-Shadow-Eigenschaft können Sie die Farbe, den Versatz und die Unschärfe von Schatten auf Seitenelementen steuern. Obwohl sie noch nicht allgemein unterstützt wird, haben einige Designer begonnen, sich für die Verwendung der CSS-Text-Shadow-Eigenschaft zu entscheiden. Überall Schatten. Allerdings ist dies nur darauf ausgelegt, die Funktionalität für eine kleine Anzahl von Benutzern zu erweitern.
Das Folgende ist ein Beispiel. Achten Sie bei der Verwendung auf die Position:relative von a und die Position:absoluteview plaincopy to clipboardprint?
<Stil>
ul,li{ margin:0px; padding:0px;list-style-type: none;}
#nav{Schriftfamilie: 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; position:absolute;cursor:pointer;}
</style>
<style>
ul,li{ margin:0px; padding:0px;list-style-type: none;}
#nav{Schriftfamilie: 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; position:absolute;cursor:pointer;}
</style>Klarkopie in die Zwischenablage anzeigen und drucken?
<div id="nav">
<ul>
<li><a href="#">Website-Startseite<span>Website-Startseite</span></a></li>
<li><a href="#">Website-Startseite<span>Website-Startseite</span></a></li>
<li><a href="#">Website-Startseite<span>Website-Startseite</span></a></li>
<li><a href="#">Website-Startseite<span>Website-Startseite</span></a></li>
<li><a href="#">Website-Startseite<span>Website-Startseite</span></a></li>
</ul>
</div>