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

9  

Solution 1

Use CSS Positioning techniques to achieve that.... Here, first of all am wrapping the image in a div element and later am using CSS pseudo :after element which is positioned absolute with an inset box-shadow

使用CSS定位技术来实现这一点....这里,首先将图像包装在div元素中,然后使用CSS伪:在元素之后使用插入框阴影定位绝对

Now make sure you've set the container element, in this case it's a div element to position: relative; else your shadow will fly out in the wild.

现在确保你已经设置了容器元素,在这种情况下它是一个div元素来定位: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 */
}

I forgot to use the z-index property so use it for the absolute positioned pseudo to ensure that it stays on the top always...

我忘了使用z-index属性,所以将它用于绝对定位的伪,以确保它始终保持在顶部...

Also, would like to make a note here that if you want the div to be side by side, you will need float or display: inline-block; as div elements are block in nature and will take 100% of the document width...

另外,想在这里做一个注释,如果你想要div并排,你需要浮动或显示:inline-block;因为div元素本质上是块,并且将占用文档宽度的100%...

Demo (z-index included in this demo)

演示(本演示中包含z-index)

Solution 2

If for some reason you want to ignore the use of :after pseudo (I don't see any reason of doing that as it's supported on IE8 as well) so you can also use a negative z-index on the img element, and use the box-shadow with inset value on the div element.

如果由于某种原因你想忽略使用:after伪(我没有看到任何理由这样做,因为它也支持IE8)所以你也可以在img元素上使用负z-index,并使用div元素上带有插入值的box-shadow。

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 (Just playing with the z-index property)

演示2(只是玩z-index属性)