Schaduw rondom afbeeldingen met behulp van filter: drop-shadow()

Vier afbeeldingen met elk een eigen drop-shadow.

<div> met drop-shadow. Nu heeft alle inhoud (vier afbeeldingen en tekst) en de border van de <div> een schaduw.
(En dit is ook een aardige illustratie, waarom schaduw bij gewone tekst meestal een bijzonder slecht idee is...)

Vier afbeeldingen met elk een eigen drop-shadow. Met behulp van z-index is de eerste afbeelding bovenaan gezet, de laatste onderaan. Door de z-index lijken eerdere afbeeldingen nu ook echt hoger dan latere afbeeldingen te staan, omdat ook de drop-shadow van eerdere afbeeldingen nu volledig te zien is.

<div> met drop-shadow. Met behulp van z-index is de eerste afbeelding bovenaan gezet, de laatste onderaan. Alle inhoud van de <div> heeft weer een schaduw, maar de dieptewerking van de vorige illustratie is weg: voor de schaduw kijkt de <div> alleen naar de omtrek van de totale inhoud, niet naar de afzonderlijke elementen in de <div>.