html - img 上的框阴影插图不起作用

Question

我已经给图像 box-shadow

box-shadow: 0 0 10px RED inset

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

我想给图片加阴影，请帮忙

Answer 1

方案一

使用 CSS 定位技术来实现......在这里，首先将图像包装在 div 元素中，然后使用 CSS 伪 :after 元素用 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 元素本质上是 block 并且将占据文档 width 的 100%...

Demo (z-index 包含在此演示中)

---

解决方案2

如果出于某种原因您想忽略 :after 伪的使用(我看不出有任何理由这样做，因为 IE8 也支持它)所以你也可以在 img 元素上使用负的 z-index，并使用 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 属性)