CSS 框阴影不起作用

Question

为什么这个 CSS 框阴影不起作用？

HTML

<img src="http://placecage.com/90/90" />

CSS

IMG {
    -webkit-box-shadow: inset 0px 0px 108px 7px #000000;
    -moz-box-shadow: inset 0px 0px 108px 7px #000000;
    -ms-box-shadow: inset 0px 0px 108px 7px #000000;
    -o-box-shadow: inset 0px 0px 108px 7px #000000;
    box-shadow: inset 0px 0px 108px 7px #000000;    
}

我在所有浏览器中都试过了。我已经在 jsFiddle 中试过了。我尝试过不同的值。我尝试了不同的方式来表达颜色。我试过很多浏览器。

谢谢

Answer 1

inset 框阴影不适用于图像元素。

实现此目的的一种方法是让另一个 div 与图像元素重叠

这是一个例子:http://jsfiddle.net/STcTN/2/

<div class="img-container">
    <img src="http://placecage.com/90/90" />    
</div>


.img-container{
    width: 90px; height: 90px;
    position: relative;
}

.img-container:after{
    content: '';
    top:0; left:0; right:0; bottom:0;
    position: absolute;
    -webkit-box-shadow: inset 0px 0px 10px 7px #000000;
    -moz-box-shadow: inset 0px 0px 10px 7px #000000;
    -ms-box-shadow: inset 0px 0px 10px 7px #000000;
    -o-box-shadow: inset 0px 0px 10px 7px #000000;
    box-shadow: inset 0px 0px 10px 7px #000000;    
}