[Editors Note: Es gibt eine Demo box-shadow inset für img-Elemente]

In einem Design, dass ich vor kurzem umsetzen musste, gab es jede Menge Bilder die einen nach innen liegenden Schlagschatten aufwiesen. Einfache Sache, dachte ich mir: Dem img-Element einfach einen box-shadow mit der Eigenschaft inset zuweisen– et voilà, die Sache wäre geritzt.

Simple Lösung, die nur einen Nachteil hat: Sie funktioniert nicht.

Alles fängt damit an, dass nach innen weisende Schatten im Css direkt auf den Hintergrund gezeichnet werden.

In terms of stacking contexts and the painting order, the outer shadows of an element are drawn immediately below the background of that element, and the inner shadows of an element are drawn immediately above the background of that element (below the borders and border image, if any).
CSS Backgrounds and Borders Module Level 3

Etwas problematisch bei img-Elementen, denn wenn das referenzierte Bild nicht transparent ist überlagert es den darunter liegenden Schatten, dieser ist also nicht sichtbar.
Somit war dieser Ansatz gestorben– eine zweite Idee musste her.

Pseudo-Elemente to the rescue!

Der zweite Lösungsvorschlag bestand im Erschaffen eines Pseudo-Elements durch :before oder :after sowie dem anschließenden Zuweisen der box-shadow-Eigenschaft zu diesem Pseudo-Element.

Wieder eine simple Lösung, die nur einen kleinen Nachteil hatte: Auch sie funktionierte nicht.

img-Elemente sind sogenannte replaced elements (Anmerkung: Deutsche Übersetzung nicht bekannt). Und was steht in der Spezifikation zu :before und :after sowie ihrem Zusammenspiel mit replaced elements?

This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.
Generated content, automatic numbering, and lists

Mist. Mistmistmist.

Aller guten Dinge sind drei

Einen dritten Ansatz hatte ich noch in petto: Er war nicht ganz so schön, weil zusätzliches Markup von Nöten war, doch theoretisch sollte er funktionieren… Und zwar wollte ich dem Bild ein Container-Element (hier bietet sich natürlich figure an) spendieren, diesem Container ein Pseudo-Element zuweisen und dem Pseudo-Element die box-shadow-Eigenschaft verpassen.

Trommelwirbel.

Was soll ich sagen: Es funktionierte. Sogar auf verschiedene Weise: Einmal mit box-shadow und einmal mit einem Css3-Verlauf. Ich habe eine Demo erstellt, wo Markup und Styles nachvollzogen werden können: box-shadow inset für img-Elemente.
Wieder was gelernt.