我已经给图像 box-shadow
box-shadow: 0 0 10px RED inset
但是阴影没有出现在图像上,如果我使用 Firebug 改变图像的路径,那么我可以看到阴影在图像的背面。
我想给图片加阴影,请帮忙
最佳答案
方案一
使用 CSS 定位技术来实现......在这里,首先将图像包装在 div
元素中,然后使用 CSS 伪 :after
元素用 inset box-shadow
现在确保你已经设置了容器元素,在本例中它是一个 div
元素到 position: relative;
否则你的影子会飞出去。
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
属性)
关于html - img 上的框阴影插图不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23465832/