Como definir a caixa de caixa apenas no fundo do CSS?

Para adicionar estilo e design ao texto e elementos, o efeito de sombra é usado. Pode ser adicionado a um elemento com o “Sombra da caixaPropriedade CSS. Ao usar vírgulas, você pode definir vários efeitos de uma só vez, eu.e., sombra horizontal, sombra vertical, radiato de desgaste, etc. Esta propriedade fornece diferentes recursos da imagem usando componentes coloridos.

Este manual fornecerá o método relacionado à configuração “Sombra da caixa”Somente na parte inferior de um elemento.

Propriedade CSS de Shadow Box

CSS oferece uma propriedade chamada “Sombra da caixa”Isso nos permite definir uma sombra para qualquer elemento ou imagem. Esta propriedade tem os seguintes aspectos:

• • offset-x: É usado para adicionar sombra horizontal.
  • Offset-y: É usado para adicionar sombra vertical.
  • cor: É usado para definir a cor da sombra.

Sintaxe

Para esclarecer esses pontos, vamos para a sintaxe da Shadow:

Shadow Box: Offset-X Offset-Y Blur-Radius Cor;

• • Offset-X e Offset-y serão positivos ou negativos.
  • Na horizontal, um valor positivo é usado para adicionar o efeito no lado direito, e um negativo é para o lado esquerdo.
  • Na vertical, o valor positivo é para o lado inferior e o negativo é para o topo.
  • Blur-Radius torna a sombra mais brilhante ou mais leve.
  • No local de cor, você atribuirá qualquer cor que desejar dar à imagem.

Para uma melhor compreensão, vamos implementar um exemplo prático do “Sombra da caixa" propriedade.

Exemplo: como definir a caixa de caixa apenas na parte inferior do CSS?

Aplicaremos o efeito de sombra da caixa a uma imagem. Para isso primeiro, adicionaremos uma imagem em HTML e depois aplicaremos a propriedade CSS “Sombra da caixa”Para isso:

Isso dará a seguinte saída:

Vamos nos mover para adicionar um efeito de sombra na parte inferior da imagem:

img
Shadow de caixa: 0px 15px 5px laranja;

Os valores acima representam os seguintes pontos:

• • offset-x é “0px”Porque não queremos exibir a sombra horizontalmente.
  • Offset-y é “15px”Para definir a largura da sombra. Deve ser positivo porque exibe uma sombra no fundo da imagem.
  • Blur-Radius é “5px”. Torna a sombra mais leve.
  • A cor da sombra é “laranja”.

Nesta imagem, podemos ver Shadow no fundo.

Conclusão

Para exibir a sombra na parte inferior da imagem, o “Sombra da caixa”Propriedade é usada. Para esse fim, o deslocamento-x é definido como “0”, Offset-y é um valor positivo, e a cor que você deseja exibir também é definida. Com a ajuda de um exemplo, este artigo explicou como exibir sombras apenas na parte inferior da imagem.