Учебное пособие по использованию свойства CSS3 box-shadow

Автор：Eve Cole Время обновления：2010-05-14 17:29:27

Свойство CSS3 box-shadow позволяет нам легко добиться эффектов тени слоя. Давайте подробно объясним этот атрибут на практике.

1. Совместимость браузера с атрибутом box-shadow.

Давайте сначала посмотрим на совместимость этого атрибута с браузерами:

Opera: Я не знаю, какую версию она начала поддерживать. Когда я публиковал эту статью для тестирования, я только что обновил Opera до последней версии 10.53, которая уже поддерживает атрибут box-shadow.
Firefox поддерживает это через частное свойство -moz-box-shadow .
Safari и Chrome поддерживают это через частное свойство -webkit-box-shadow .
Поддерживается не всеми IE (не знаю, улучшился ли IE9). Не волнуйтесь, в конце статьи мы представим несколько хаков для IE.

box-shadow имеет шесть настраиваемых значений:

img{box-shadow: Тип тени Смещение по оси X Смещение по оси Y Размер тени Расширение тени Цвет тени}

Если тип тени не установлен, по умолчанию используется эффект тени. Если установлено значение «вставка», это эффект внутренней тени.
Смещение по осям X и Y не эквивалентно, но похоже на «угол» и «положение» в фотошопе.
Размер тени, протяженность, цвет такие же, как в Фотошопе.
3. Пример анализа
Давайте рассмотрим эффект box-shadow на нескольких примерах. Сначала создадим простой HTML-код для тестирования:
<html>
<голова>
<style type="text/css">Напишите здесь часть CSS</style>
</голова>
<тело>
<img src="test.jpg" />
</тело>
</html>
Обратите внимание : чтобы избежать проблем, в приведенном ниже коде CSS написано только box-shadow . При реальном использовании вам также следует писать -moz-box-shadow и -webkit-shadow. То, что вам нужно сделать, очень просто: скопируйте две тени блока и добавьте перед ними -moz- и -webkit-.
img { -moz-box-shadow:2px 2px 10px #06C; -webkit-box-shadow:2px 2px 10px #06C; box-shadow:2px 2px 10px #06C; }