CSS: sombras em caixas e imagens

Exemplo de regra CSS para colocar sombra em uma caixa com a propriedade box-shadow:

.sombra {box-shadow:5px 10px 15px 6px #880088 inset;}

Valores:

1. h-shadow (necessário) - Onde está escrito 5px você coloca a distância horizontal entre a sombra e o objeto, da esquerda para a direita se for uma sobra outset. Se quiser que a sombra fique à esquerda, o valor deve ser negativo.
2. v-shadow (necessário) - Onde está escrito 10px você coloca a distância vertical entre a sombra e o objeto, de cima para baixo se for outset. Se quiser que a sombra fique acima, o valor deve ser negativo.
3. blur (opcional) - Onde está escrito 15px você define o quanto a sombra ficará “esfumaçada” (borrada). Esse valor é opcional, se você não define ou escolhe 0px a sombra será totalmente opaca, com bordas lisas. Esta opção não aceita valores negativos.
4. spread (opcional) - Onde está está escrito 6px você define o quanto a sombra será maior do que o objeto original. Para que a sombra seja menor que o objeto original, use número negativo. Esse valor também é opcional, mas você sempre terá que definir o blur se quiser definir o spread porque os valores são lidos sempre nessa ordem.
5. color (necessário) - Onde está escrito #880088 você define a cor desejada para a sombra.
6. inset (opcional) – O valor inset diz que a sombra será interna. Para que apareça a sombra externa não escreva nada depois da cor.

Exemplo de regra com outras propriedades para adicionar à folha de estilos:

.sombraroxa {box-shadow:5px 5px 10px #880088;
background:pink; padding:10px; margin:20px;}

Uso em uma <div>:

<div class='sombraroxa'>Exemplo de caixa com fundo rosa e sombra roxa.</div>

Como fica:

Exemplo de caixa com fundo rosa e sombra roxa.

Uso em uma imagem:

<div style="box-shadow:5px 5px 10px #880088; width:400px; height:267px; padding:0;"><img style='padding:0;margin:0;' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitDmvNVFGK4mQqMJXGMtoA0zUyFctIxMPb7AwRZHSNk2YPPCZocIWwv4IAhbE_XG7wNGXOS4fr1Yj0usFNJZMOVFWJ3ErFOvdm2_q5KMWUBkBVjj1_SCv2llM2jJj31P2hdYJfuhhxLlM1/s400/borboleta.jpg"/></div>

Como fica:

Exemplo de regra para sombra inset:

<style>
.sombraverde {box-shadow:0px 0px 10px #008800 inset;
background:#ccff00; padding:10px; margin:20px;}
</style>

<div class='sombraverde'>Caixa verde com borda inset.</div>

Caixa verde com borda inset.

A propriedade box-shadow pode ser usada em outros elementos block. Leia também:

• Elementos block e inline
• Como colocar sombra no texto
• Folha de estilos em cascata (CSS)

Até mais!

Imagem: Pergunte ao Fred
Fonte: W3Schools