Свойство text-shadow в CSS2 позволяет легко добавлять тени к тексту на веб-страницах, но пока это поддерживается только Safari в OS X. Сегодня мы создадим эффекты тени текста CSS для других браузеров, включая Firefox, и можем это сделать. пройти w3 верификацию.
Свойство text-shadow, которое обсуждается уже много лет, позволяет управлять цветом, смещением и размытием теней на элементах страницы. Хотя оно еще не получило широкой поддержки, некоторые дизайнеры начали использовать CSS text-shadow. тени собственности повсюду. Хотя это предназначено лишь для расширения функциональности для небольшого числа пользователей.
Ниже приведен пример. При его использовании обратите внимание на позицию: относительно a и позицию: абсолютное представление. Обычная копия в буфер обмена?
<стиль>
ul, li {маржа: 0 пикселей; дополнение: 0 пикселей; тип стиля списка: нет;}
#nav{font-family: Verdana, "宋体", Arial;}
#nav li { float: left; маржа слева: 30 пикселей;}
#nav span{display:none;}
#nav a {размер шрифта: 12 пикселей; вес шрифта: жирный; цвет: # FF6600; оформление текста: нет; дисплей: блок;}
#nav a:hover {color:#999;top:1px; left:1px Position:relative;}
#nav a: hover span { display:block; top:-2px; left:-2px; color:#FF3300;cursor:pointer;}
</стиль>
<стиль>
ul, li {маржа: 0 пикселей; дополнение: 0 пикселей; тип стиля списка: нет;}
#nav{font-family: Verdana, "宋体", Arial;}
#nav li { float: left; маржа слева: 30 пикселей;}
#nav span{display:none;}
#nav a {размер шрифта: 12 пикселей; вес шрифта: жирный; цвет: # FF6600; оформление текста: нет; дисплей: блок;}
#nav a:hover {color:#999;top:1px; left:1px Position:relative;}
#nav a: hover span { display:block; top:-2px; left:-2px; color:#FF3300;cursor:pointer;}
</style>просмотреть обычную копию в буфер обмена, распечатать?
<div id="nav">
<ул>
<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>