img设置内阴影

最近学习网页，发现html中的img标签无法直接设置内阴影（如图1）。

图1

相应代码：

<style type="text/css">
            div{width: 810px;height: 450px;margin-bottom: 20px;}
            img{width: 800px;height: 450px;}
            a{display: block;width: 800px;height: 450px;}
            .div1 img{box-shadow: 0 0 58px pink inset;}
</style>

<!--img无法直接上内阴影，无效果-->
        <div class="div1">
            <img src="img/timg.jpg" alt=""/>
        </div>`

考虑使用before伪类，效果与图1一样，代码如下：

.div2 img{position: relative;}
.div2 img:before{display: block;content: "";width: 100%;height: 100%;position:absolute;box-shadow: 0 0 58px pink inset;}

<!--考虑使用before伪类加内阴影,对应div2无效果-->
<div class="div2">
    <img src="img/timg.jpg" alt=""/>
</div>

当然，你如果想把图片设置为元素的背景是没问题的，但是有些情况下需要改较多图片，这时设置背景就太麻烦了。所以这种情况先忽略。
一般情况下img需要有链接效果，下面是出现的状况和解决方案：

.div3 img{position: relative;z-index: -1;}
.div3 a{box-shadow: 0 0 58px pink inset;}
.div4,.div5,.div6{background: greenyellow;}
.div4 img{position: relative;z-index: -1;}
.div4 a{box-shadow: 0 0 58px pink inset;}
.div5 a:before{display: block;content: "";width: 800px;height: 450px;position:absolute;box-shadow: 0 0 58px pink inset;}
.div6{position: relative;}
.div6 img{position: absolute;}
.div6 a{position: absolute;box-shadow: 0 0 58px pink inset;}

<!--图片一般须有链接效果，所以以下皆用到a标签,分不同情况讨论->
<!--1、父容器（div）无背景色情况,a包裹img,通过设置a的内阴影完成相同效果，此时可使用定位和z-index实现，对应div3--->
<div class="div3">
    <a href=""><img src="img/timg.jpg" alt=""/></a>
</div>
<!--2、父容器如设置背景色情况。如使用方法一会发现背景色会遮盖图片，对应div4.
即使设置div\a\img三者的定位和z-index也无效（注：z-index只有使用定位才有效）-->
<div class="div4">
    <a href=""><img src="img/timg.jpg" alt=""/></a>
</div>
<!--2.1在a标签上使用before覆盖一层div实现内阴影，对应div5-->
<div class="div5">
    <a href=""><img src="img/timg.jpg" alt=""/></a>
</div>
<!--2.2将a标签抽出，与img同级，都使用绝对定位到同一区域，a在img之上，设置a的内阴影,对应div6-->
<div class="div6">
    <img src="img/timg.jpg" alt=""/>
    <a href=""></a>
</div>

效果图分别为图2、3、4、5：

图2

(给a设置背景色red,使用定位将div、a、img的z-index分别设置为1、2、99，将img向右移动100px后结果，无效果)
图3

图4

图5