Adding a shadow to an image with an alpha channel using the `box-shadow` property doesn't wrap the shadow around the transparent parts of the image. Instead we just get a square box shadow. In order to make the shadow wrap naturally around the contours of the image, we need to use `filter: drop-shadow(x, y, blur, spread, color)`.
This is a useful feature for two reasons:
Applying a drop shadow for images with alpha channels. This one is pretty obvious. If we have an image, a logo for example, that we want to raise off the background, a shadow that wraps the contours of the logo is a great way to pull the logo forward and pop out of the page. (Example: I used this for the logos in the footer of this website http://www2.unb.ca/alc/)
Applying an outline/border for images with alpha channels. This is a lesser-known use case for the drop-shadow filter. By combining several drop-shadows, we can add a shadow that functions like an image outline. This is useful if a logo is placed on top of a busy background or if parts of a logo have poor contrast with a background. (Example: I didn't use drop-shadow for this but it's the same idea for the colored titles on this website: http://davidleger95.github.io/nac-website/)