A propriedade CSS `box-shadow` adiciona efeitos de sombra ao redor de um elemento. Isso pode ser usado para adicionar profundidade e dimensão a um elemento ou para destacá-lo do resto do conteúdo de uma página.
A propriedade `box-shadow` leva até quatro valores, que especificam o deslocamento, o desfoque e a propagação da sombra, e a cor da sombra.
1.
Deslocamento :os valores de deslocamento especificam a distância horizontal e vertical da sombra em relação ao elemento. Os valores positivos movem a sombra para a direita e para baixo, enquanto os valores negativos movem a sombra para a esquerda e para cima.
2.
Desfoque :o valor de desfoque especifica a quantidade de desfoque aplicada à sombra. Um valor de desfoque mais alto criará uma sombra mais suave, enquanto um valor de desfoque mais baixo criará uma sombra mais nítida.
3.
Divulgue :o valor de dispersão especifica a quantidade de dispersão aplicada à sombra. Um valor de espalhamento mais alto criará uma sombra mais ampla, enquanto um valor de espalhamento mais baixo criará uma sombra mais estreita.
4.
Cor :O valor da cor especifica a cor da sombra. Qualquer valor de cor CSS válido pode ser usado.
Aqui estão alguns exemplos de como usar a propriedade `box-shadow` para criar diferentes tipos de sombras:
- Para criar um sombreamento simples, use um valor de deslocamento positivo e um valor de desfoque baixo, como este:
```css
sombra da caixa:5px 5px 5px #888888;
```
- Para criar uma sombra mais suave, aumente o valor do desfoque, assim:
```css
sombra da caixa:5px 5px 10px #888888;
```
- Para criar uma sombra mais ampla, aumente o valor do spread, assim:
```css
sombra da caixa:5px 5px 10px 5px #888888;
```
- Para criar uma sombra colorida, especifique um valor de cor, como este:
```css
sombra da caixa:5px 5px 10px 5px vermelho;
```
A propriedade `box-shadow` é uma ferramenta poderosa que pode ser usada para criar uma variedade de efeitos visuais. Experimente valores diferentes para ver o que você pode criar!
