img上的box-shadow插图不起作用

Question

我已将box-shadow提供给图片

box-shadow: 0 0 10px RED inset

但阴影没有出现在图像上，如果我通过使用firebug改变图像的路径，那么我可以看到阴影位于图像的背面。

我想在图片上留下阴影，请帮忙

Answer 1

解决方案1 ​​

使用CSS定位技术实现这一目标......首先，我将图像包装在div元素中，然后使用CSS伪:after元素，该元素位于绝对位置< em> inset box-shadow

现在请确保您已设置容器元素，在这种情况下，div元素为position: relative;，否则您的阴影会在野外飞出。

Demo

div:after {
    content: "";
    position: absolute;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    box-shadow: inset 0 0 12px blue;
    top: 0;
    left: 0;
    z-index: 1; /* You can use higher to ensure that it stays on top */
}

我忘了使用z-index属性，因此请将其用于absolute定位伪，以确保它始终位于顶部...

另外，在此请注意，如果您希望div并排，则需要float或display: inline-block;作为div元素阻止本质上将占用文档width ...

的100％

Demo （本演示中包含z-index）

---

解决方案2

如果由于某种原因你想忽略:after伪的使用（我也没有看到任何理由这样做，因为它也支持IE8）因此您还可以在z-index元素上使用否定img，并在box-shadow元素上使用inset div值。

div {
    position: relative; /* Not required now */
    margin: 10px;
    float: left;
    box-shadow: inset 0 0 12px blue;
    border-radius: 50%;
}

div img {
    display: block;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    position: relative;
    z-index: -1;
}

Demo 2 （只需使用z-index属性）