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;    
}

Answer 2

您无法在this article

中描述的图像上使用CSS3插入框阴影

实现此目标的最佳方法是在图像上添加绝对位置元素，锚点或div。

Answer 3

您可能需要包含图像并应用框阴影，或者如果可能，将图像作为背景应用于容器。

HTML

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

<div class="as-background"></div>

CSS

div {
    width:90px;
    height:90px;
    -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;    
}

img{

    opacity:0.5;
}

div.as-background{
    margin-top:20px;
    width:90px;
    height:90px;
    background:url('http://placecage.com/90/90') no-repeat 0 0;
}

Here is a fiddle

您可以看到插入框阴影有利于背景图像，因为您必须降低不透明度以直接在背后看到它。希望有所帮助。

CSS box-shadow不起作用

3 个答案: