A propriedade Box-Shadow disponibiliza sombreamentos em diversos elementos como Divs, vamos ao exemplo abaixo.
Para utilizar o Box Shadow é bem simples, basta você adicionar as linhas que está em baixo, a qualquer um documento CSS.
-moz-box-shadow: 2px 1px 6px #999; /* versões antigas do Firefox */
-webkit-box-shadow: 2px 1px 6px #999; /* versões antigas do Chrome e para o Safari */
-khtml-box-shadow: 2px 1px 6px #999; /* atributo para Konqueror *
Como podem ver acima, você pode posicionar o sua sombra, esta pode ser mais pra direita, mais para esquerda, para baixo ou para cima.
1. O primeiro "2px" ilustra posição horizontal da sombra em relação ao elemento, valor positivo projeta a sombra para a direita e negativo para a esquerda.
2. O segundo "1px" ilustra é a posição vertical da sombra em relação ao elemento, valor positivo projeta a sombra para baixo e negativo, para cima.
3. O terceiro "6px" ilustra o blur(esfumaçado) da sombra, só aceita valores positivos ou 0 (zero). Se o esfumaçado for 0px(zero), quer dizer que a sombra não tem nenhum efeito esfumaçado e aparece totalmente definida. Se o valor “blur” for maior que zero, como em nosso exemplo, é de 6px, significa que a sombra terá um esfumaçado na largura de 6 pixels.
4. É a "#999" é a cor da sombra.
É isso pessoal, espero que voces tenham entendido tudo certinho e que aqueles que ainda não usam o box-shadow passem a usá-lo. Até a póxima!