Como usar Box-shadow no CSS corretamente

Usado para projetar sombras (normalmente chamadas de “sombras projetadas”, como no Photoshop) a partir de elementos. Aqui está um exemplo com o suporte de navegador mais profundo possível:

.sombra {
  -webkit-box-shadow: 4px 4px 5px 6px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    4px 4px 5px 6px #ccc;  /* Firefox 3.5 - 3.6 */
  box-shadow:         4px 4px 5px 6px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

assim:

  box-shadow: [distância horizontal] [distância vertical] [raio de desfoque] [raio de propagação opcional] [Cor];

1. Distância horizontal (obrigatório) da sombra, positivo significa que a sombra ficará à direita da caixa, um distância negativo colocará a sombra à esquerda da caixa.

2. Distância vertical (obrigatório) da sombra, um negativo significa que a sombra da caixa estará acima da caixa, um positivo significa que a sombra estará abaixo da caixa.

3. raio do desfoque (obrigatório), se definido como 0, a sombra será nítida. Quanto maior o número, mais desfocado será e quanto mais longe a sombra se estenderá. Por exemplo, uma sombra com 5px de distância horizontal que também tem um raio de desfoque de 5px terá 10px de sombra total.

4. O raio de propagação (opcional), os valores positivos aumentam o tamanho da sombra, os valores negativos diminuem o tamanho. O padrão é 0 (a sombra tem o mesmo tamanho do desfoque).

5. Cor (obrigatório) - aceita qualquer valor de cor, como hex, named, rgba ou hsla . Se o valor da cor for omitido, as sombras da caixa serão desenhadas na cor do primeiro plano (texto color). Mas esteja ciente de que os navegadores WebKit mais antigos (anteriores ao Chrome 20 e Safari 6) ignoram a regra quando a cor é omitida.

É importante dizer que mais de um efeito pode ser aplicado ao mesmo elemento. Para fazer isso, basta separar o valor do atributo com uma vírgula. Por exemplo:

box-shadow: 5px 5px 10px green, 
            -5px 0 darkgreen;