DEV Community

Cover image for Diferença entre um box-shadow e drop-shadow CSS
Stefany Repetcki
Stefany Repetcki

Posted on

Diferença entre um box-shadow e drop-shadow CSS

diferença entre um box-shadow e drop-shadow CSS

O box-shadow e o drop-shadow são duas propriedades CSS que são frequentemente usadas para adicionar sombras a elementos em um site. Embora eles pareçam semelhantes, eles têm diferenças importantes em como funcionam e em que tipos de elementos são melhores para cada um. Neste artigo, vamos discutir as diferenças entre box-shadow e drop-shadow CSS e quando usar cada um.

Box-shadow CSS

A propriedade box-shadow CSS permite adicionar uma sombra a um elemento, incluindo texto, imagens e elementos de formulário. O box-shadow é aplicado a todo o elemento e é posicionado em torno do limite do elemento. A sintaxe para a propriedade box-shadow é a seguinte:

box-shadow: h-shadow v-shadow blur spread color inset;

Onde:

  • h-shadow: o deslocamento horizontal da sombra em relação ao elemento;
  • v-shadow: o deslocamento vertical da sombra em relação ao elemento;
  • blur: o desfoque da sombra;
  • spread: o tamanho da sombra;
  • color: a cor da sombra;
  • inset: uma palavra-chave opcional que especifica que a sombra é interna ao elemento.

Por exemplo, o código a seguir adiciona uma sombra escura ao redor de um elemento com um desfoque de 10 pixels e um tamanho de 5 pixels:

box-shadow: 0 0 10px 5px #333;

Drop-shadow CSS

A propriedade drop-shadow CSS é semelhante à box-shadow, mas é usada especificamente para sombras de elementos de imagem. A sombra gerada pela propriedade drop-shadow é aplicada apenas ao conteúdo da imagem e não ao limite do elemento. A sintaxe para a propriedade drop-shadow é a seguinte:

drop-shadow: h-shadow v-shadow blur color;

Onde:

  • h-shadow: o deslocamento horizontal da sombra em relação ao elemento;
  • v-shadow: o deslocamento vertical da sombra em relação ao elemento;
  • blur: o desfoque da sombra;
  • color: a cor da sombra.

Por exemplo, o código a seguir adiciona uma sombra escura ao conteúdo de uma imagem com um desfoque de 5 pixels:

drop-shadow(0 0 5px #333);

Quando usar cada um

O box-shadow é uma propriedade CSS geral que pode ser usada para adicionar sombras a qualquer elemento, incluindo imagens. No entanto, se você deseja aplicar uma sombra a uma imagem, a propriedade drop-shadow é a melhor opção. A sombra gerada pela propriedade drop-shadow é aplicada apenas ao conteúdo da imagem, o que significa que a sombra seguirá o contorno da imagem, em vez de criar um retângulo ao redor dela. Isso é particularmente útil para imagens com fundos transparentes ou recortadas em formatos irregulares.

Conclusão

Tanto o box-shadow quanto o drop-shadow são propriedades CSS úteis para adicionar sombras a elementos em um site. O box-shadow é geralmente usado para elementos não-imagem.

Stefany Repetcki - Dev Front End

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up