Acho que identifiquei o problema sobre o fato do box-shadow:inset
não funciona na <img>
e resumidamente se deve ao fato da imagem ser um elemento do tipo Replaced element
Veja o que a documentação da Mozilla diz sobre os Replaced element
In CSS, a replaced element is an element whose representation is outside the scope of CSS; they're external objects whose representation is independent of the CSS formatting model.
Tradução: "Em CSS, um elemento substituído é um elemento cuja representação está fora do escopo do CSS; eles são objetos externos cuja representação é independente do modelo de formatação CSS."
Fonte: https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element
A W3C fala que:
For example, the content of the HTML IMG element is often replaced by the image that its "src" attribute designates. ... The content of replaced elements is not considered in the CSS rendering model.
Tradução: "Por exemplo, o conteúdo do elemento HTML IMG é frequentemente substituído pela imagem que seu atributo "src" designa. ... O conteúdo dos elementos substituídos não é considerado no modelo de renderização CSS.
Fonte: https://www.w3.org/TR/CSS21/conform.html#replaced-element
Talvez por isso a renderização da imagem fique por cima do box-shadow:inset
já que o controle do conteúdo da imagem (src) não é definido pelo CSS.
Repare que nesse código eu fiz um experiência usando a propriedade object-fit
e object-position
para deslocar a imagem dentro do próprio "container". Repare que a sombra está lá, mas ela fica por baixo do conteúdo da imagem (src)
img {
-webkit-box-shadow: inset 0 0 10px 10px red;
-moz-box-shadow: inset 0 0 10px 10px red;
box-shadow: inset 0 0 10px 10px red;
object-fit: contain;
object-position: top 25px left 25px;
border: 1px solid;
}
<img src='src='https://wwwi.fillmurraysstatic.com/200net/200'oWdCL.png' alt=''/>
OBS: No Chrome e Firefox é possível ver o teste, mas certifique-se que o seu browser suporta object-fit
: https://caniuse.com/#feat=object-fit