CSS2 の text-shadow プロパティを使用すると、Web ページのテキストに簡単に影を追加できますが、これをサポートしているのは OS X の Safari だけです。今日では、Firefox を含む他のブラウザ用の CSS テキスト シャドウ効果を作成します。 w3検証に合格します。
text-shadow プロパティは何年も議論されており、ページ要素の影の色、オフセット、ぼかしを制御できますが、まだ広くサポートされていませんが、一部のデザイナーは CSS text- を使用することを決定し始めています。どこにでもプロパティをシャドウします。ただし、これは少数のユーザー向けの機能を強化することのみを目的として設計されています。
以下は例です。使用する場合は、position:relative と、position:absoluteview plaincopy to Clipboardprint? に注意してください。
<スタイル>
ul,li{ マージン:0px;リストスタイルタイプ:なし;}
#nav{font-family: Verdana、"宋体"、Arial;}
#nav li{ float:left:30px;}
#ナビゲーション スパン{表示:なし;}
#nav a{font-size:12px;font-weight:bold;color:#FF6600;text-decoration: none;}
#nav a:hover{ color:#999;top:1px; left:1px; }
#nav a:ホバースパン{表示:ブロック;左:-2px;位置:#FF3300;カーソル:ポインタ;}
</スタイル>
<スタイル>
ul,li{ マージン:0px;リストスタイルタイプ:なし;}
#nav{font-family: Verdana、"宋体"、Arial;}
#nav li{ float:left:30px;}
#ナビゲーション スパン{表示:なし;}
#nav a{font-size:12px;font-weight:bold;color:#FF6600;text-decoration: none;}
#nav a:hover{ color:#999;top:1px; left:1px; }
#nav a:ホバースパン{表示:ブロック;左:-2px;位置:#FF3300;カーソル:ポインタ;}
</style>プレーンコピーをクリップボードに表示しますか?
<div id="ナビ">
<ul>
<li><a href="#">ウェブサイトのホームページ<span>ウェブサイトのホームページ</span></a></li>
<li><a href="#">ウェブサイトのホームページ<span>ウェブサイトのホームページ</span></a></li>
<li><a href="#">ウェブサイトのホームページ<span>ウェブサイトのホームページ</span></a></li>
<li><a href="#">ウェブサイトのホームページ<span>ウェブサイトのホームページ</span></a></li>
<li><a href="#">ウェブサイトのホームページ<span>ウェブサイトのホームページ</span></a></li>
</ul>
</div>