Teoría
Teoría

Diferencias entre box-shadow y drop-shadow

El filtro de sombra tiene algunas diferencias con la propiedad box-shadow.

Por un lado, el navegador puede usar aceleración por hardware para dibujar drop-shadow. El rendimiento depende del navegador y del contenido: el filtro no es siempre más rápido que box-shadow.

Por otro lado, drop-shadow sigue el contorno no transparente de las imágenes e ignora las zonas transparentes, mientras que box-shadow crea una sombra rectangular alrededor de toda la imagen.

Una imagen PNG con zonas transparentes nos permite comparar estos dos efectos de sombra. Pero basta con darle un fondo opaco a la imagen para que cambie el comportamiento del filtro.

Los filtros llegaron a CSS desde SVG, por lo que drop-shadow y box-shadow tienen implementaciones diferentes. Por eso, con los mismos parámetros, las sombras se verán distintas.

Comparemos los efectos de sombra con un ejemplo.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Diferencias entre box-shadow y drop-shadow</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body> <div class="compare symbol"> <div class="compare-left box-shadow"> <img src="img/symbol.png" alt=""> </div> <div class="compare-left filter-shadow"> <img src="img/symbol.png" alt=""> </div> </div> </body> </html>

CSS

.box-shadow img { } .filter-shadow img { }

ObjetivosRealizado

Agrega a la imagen del bloque .box-shadow la sombra box-shadow: 0 0 10px red.
Aplica a la imagen del bloque .filter-shadow el filtro drop-shadow con el valor 0 0 10px red.
Luego asigna un fondo blanco a ambas imágenes: background-color: #ffffff.