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. Você pode usar qualquer valor de cor CSS válido, como uma cor nomeada, um valor hexadecimal ou um valor RGB.
Aqui estão alguns exemplos de como usar a propriedade `box-shadow` para criar diferentes tipos de sombras:
-
Sombra básica :
```css
sombra da caixa:5px 5px 5px #888888;
```
Isso criará uma sombra com deslocamento de 5 pixels nas direções horizontal e vertical, com desfoque de 5 pixels e espalhada por 5 pixels. A sombra será um tom de cinza.
-
Sombra inserida :
```css
sombra de caixa:inserção 5px 5px 5px #888888;
```
Isso criará uma sombra inserida, o que significa que a sombra será desenhada dentro do elemento e não fora dele. A sombra terá o mesmo tamanho e formato do elemento e será um tom de cinza.
-
Várias sombras :
```css
sombra de caixa:5px 5px 5px #888888, 10px 10px 10px #444444;
```
Isso criará duas sombras, uma com deslocamento e desfoque maiores que a outra. As sombras serão ambas em tons de cinza, mas a segunda sombra será mais escura que a primeira.
Você pode usar a propriedade `box-shadow` para criar uma ampla variedade de sombras, que podem ser usadas para adicionar profundidade e dimensão aos seus designs. Experimente valores diferentes para ver quais efeitos você pode criar.
