Здравствуйте, сегодня мы расмотрим интересное свойтво — тень в CSS3, для блока (div). Чтоб сделать тень в CSS3 для блока (div) нужно воспользоваться свойством  box-shadow. Что интересно,тень в CSS3 для блока (div), может быть не одна, можно использовать несколько теней, прописывая их параметры через запятую. Если вы  используете не одну CSS3 тень  для блока (div) , то  порядок будет таким: первая тень в списке будет на самом верху, последняя в  — в самом низу.

Допускаеться что тень в CSS3 для блока (div) будет не одна

Совместимость с браузерами:

Какие параметры у box-shadow:

box-shadow: <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>

Давайте перейдем к практическому примеру, итак, добавив к стилю блока вот такой код:

-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    7px 7px 5px rgba(50, 50, 50, 0.75);
box-shadow:         7px 7px 5px rgba(50, 50, 50, 0.75);

смотрите на рис.1 что вас получиться:

рис.1

Для того  что б тень работала в во всех браузерах, нужно писать мини хак в css, это означает что свойство тени нужно написать три раза.

-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);/* Для Safari и Chrome */
-moz-box-shadow:    7px 7px 5px rgba(50, 50, 50, 0.75);/* Для Firefox */
box-shadow:         7px 7px 5px rgba(50, 50, 50, 0.75);

создавать тень в  CSS3 не видя ее сложно

Я считаю, что указывать тень в слепую в редакторе неудобно и сложно, поэтому пользуюсь онлайн генератором CSS теней, читайте статью Онлайн генератор CSS теней