Como adicionar Sombras para Box Elements

Além de sombras de texto, CSS 3 lhe dá o poder para adicionar sombras para a caixa elementos, tais como tags. Na figura você vê como sombras foram usadas para detonar seções, como a de lado, neste exemplo página do site da Jelly Rancher.

Muito parecido com a sombra de texto, o primeiro valor informa ao navegador Safari do deslocamento horizontal, o segundo representa o deslocamento vertical, e o terceiro valor descreve como turva a sombra deve ser. Novamente, o padrão é 0, e se você não especificar o borrão, cor da sombra é completamente sólida.

Aqui está a sintaxe para sombras caixa suspensa para navegadores WebKit:

-webkit-box-shadow: horizontal cor- desfoque vertical

Uma cor RGBa dá-lhe maior controle sobre a aparência da sombra porque você pode adicionar transparência. Da mesma forma, usando a medição in cria uma sombra que se ajusta melhor, se o tamanho do texto muda.

O seguinte estilo adiciona uma sombra a todos os elementos da caixa em uma página:

div {-webkit-box-shadow: .15em .25em .5em rgba (27, 27, 27, 0,6) -}