Box-Shadow

Olá André! A propriedade box-shadow tem alguns parâmetros opcionais.

Passando de um em um:

box-shadow: 0 0 2px black;

• O primeiro 0 é a posição horizontal da sombra.
• O segundo 0 é a posição vertical da sombra.
• 2px é um blur, o desfoque da sombra. Este é opcional, pois a sombra pode ou não ter desfoque.
• black é a cor da sombra.
• Existe mais um parâmetro opcional entre o 2px e o black, que representa o espalhamento da sombra.

Espero ter ajudado!

Oi André, tudo bem? Vejamos. De acordo com o MDN, o box-shadow pode receber ainda mais valores.

Veja este link: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

Mas no geral, o primeiro valor é a distancia da somba em x, o segundo valor, em y, o terceiro seria a quantidade de blur e por último a cor.

Consultando o link acima você vai ver mais exemplos e como fazer efeitos bem legais como sombra interna.

Espero ter ajudado, bons estudos!

=)

Boa tarde, André!

Como você disse, podemos passar diversos valores para a propriedade box-shadow. Uma opção seria:

box-shadow: 5px 5px black;
box-shadow: 5px 5px 2px black;
box-shadow: 5px 5px 2px 2px black;

Agora vamos ao que cada uma vez... A primeira, você está dizendo quais os valores offset-x e offset-y, ou seja, qual o deslocamento da sobra em cada um dos eixos, x e y. Além disso, conforme você mesmo havia dito, passamos uma cor. Nesse caso, estamos dizendo que queremos uma sobra da cor preta com 5px de deslocamento nos eixos x e y.

No segundo caso, temos a mesma sobra que a primeira, mas com a diferença que também adicionamos um blur-radius, ou seja, estamos dizendo qual será o raio do desfoque da sombra, 2px nesse caso.

O terceiro caso informamos as mesmas coisas que o segundo, com a diferença que informamos ainda o spread-radius, ou seja, o raio de propagação da sombra, no caso, 2px também.

Cuidado para não se confundir com esses dois últimos valores - blur-radius e spread-radius. Depois faça um teste para você compreender melhor o que cada um significa, caso ainda fique um pouco nebuloso para você. =)

Ahh, e você ainda pode definir que quer uma sombra interna. Para isso, basta informar no início da propriedade:

box-shadow: inset 5px 5px black;

Espero ter ajudado, qualquer dúvida, só postar por aqui. =)

Fábio