Свойство box-shadow позволяет сделать тень от объекта при помощи только CSS3, без использования изображений.
Разберем как это работает, создадим тень от объекта:
Пример 1.
box-shadow:0 0 10px 0 #555555;
-webkit-box-shadow:0 0 10px 0 #555555;
-moz-box-shadow:0 0 10px 0 #555555;
Как Вы видете указаны 4 значения и цвет тени:
0 0 10px 0 #555555;
Первое значение (у меня выставлено "0") - сдвиг на X px по горизонтали;
Второе значение - сдвиг на X px по вертикали;
Третье значение (10px) - радиус размытия (X px);
Четвертое значение - радиус растяжения тени (X px);
Ну, и пятое значение - это цвет тени.
Как видите данные задаются одинаково но с тремя разными значениями box-shadow, -webkit-box-shadow и -moz-box-shadow
Это необходимо для понимания свойства разными браузерами, за исключением IE.
Пример 2.
Тень или свечение внутрь объекта средствами CSS3:
Что бы направить тень внутрь объекта, для этого нужно указать "inset":
box-shadow:inset 0 0 10px 0 #555555;
Браузеры, которые поддерживают это свойство: Firefox, Opera, Chrome, Safari.
В IE объекты будут отображаться без тени.
