为什么这个 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 中试过了。我尝试过不同的值。我尝试了不同的方式来表达颜色。我试过很多浏览器。
谢谢
最佳答案
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;
}
关于CSS 框阴影不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21683433/