box-shadow:inset property does not work in <img>

Question

I was testing the property box-shadow to make a gallery and realized that the tag <img> does not accept the box-shadow:inset... but accepts the box-shadow normal.

However if I put the <img> as a background to div the box-shadow:inset works right!

My doubt would be: How to put box-shadow:inset without having to use the image as background?

Simple model to illustrate

html, body {
    height: 100%;
    width: 100%;
    margin: 20px;
}
div { 
    width: 200px;
    height: 200px;
    margin: 40px 0;
    background-image: url(http://fillmurray.com/200/200);
    box-shadow: inset 0 0 10px 10px red, 0 0 5px 10px #000000;
    -moz-box-shadow: inset 0 0 10px 10px red, 0 0 5px 10px #000000;
    -webkit-box-shadow: inset 0 0 10px 10px red, 0 0 5px 10px #000000;
}
img.bs {
    display: block;
    margin: 40px 0;
    box-shadow: inset 0 0 10px 10px red, 0 0 5px 10px #000000;
    -moz-box-shadow: inset 0 0 10px 10px red, 0 0 5px 10px #000000;
    -webkit-box-shadow: inset 0 0 10px 10px red, 0 0 5px 10px #000000;
}
img.ds {
    filter: drop-shadow(0px 0px 10px red);
    -webkit-filter: drop-shadow(0px 0px 10px red);
}

<div></div>
<img class="bs" src='http://fillmurray.com/200/200' alt=''/>
<img class="ds" src='http://fillmurray.com/200/200' alt=''/>

NOTE: I also tried with the property filter:drop-shadow but she doesn’t have the option of inset

Answer 1

I think I’ve identified the problem with the fact that box-shadow:inset does not work in the <img> and briefly is due to the fact that the image is an element of the Replaced element

See what the Mozilla documentation says about 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.

Translation: "In CSS, a replaced element is an element whose representation is outside the scope of CSS; they are external objects whose representation is independent of the CSS formatting model."

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element

The W3C says that:

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.

Translation: "For example, the content of the HTML IMG element is often replaced by the image its attribute "src" designates. ... The content of the replaced elements is not considered in the CSS rendering template.

Source: https://www.w3.org/TR/CSS21/conform.html#replaced-element

Maybe that’s why the rendering of the image is above the box-shadow:inset since the control of the content of the image (src) is not defined by CSS.

Notice that in this code I did an experiment using the property object-fit and object-position to move the image inside itself "container". Notice that the shadow is there, but it is below the content of the image (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='http://fillmurray.com/200/200' alt=''/>

OBS: In Chrome and Firefox you can see the test, but make sure that your browser supports object-fit: https://caniuse.com/#feat=Object-fit

Answer 2

html, body {
    height: 100%;
    width: 100%;
    margin: 20px;
}
img {
    width: 200px;
    height: 200px;
    margin: 40px 0;
    box-shadow: inset 0 0 0 0 #000000, 0 0 10px 7px red, -1px 0px 7px 20px #000000;
}

<img src='http://fillmurray.com/200/200' alt=''/>