如何给图片添加内阴影的盒子阴影？

Question

基本上，我想要在图像上实现一种凹陷的效果，就像这个Fiddle中的外部div所示：http://jsfiddle.net/sK5bB/32/

这是来自Fiddle的CSS（它只适用于div，而不是图像）：

#outerDiv {    
    width:100px;
    height:100px;
    border-radius:5px;
    box-shadow:inset 1px 1px 10px #555;
}

- NickEckhart

---

这是因为阴影位于图像后面。您需要将其包装在另一个元素中或使用background-image代替。 - gvee

Answer 1

对于图片，您需要使用具有该box-shadow的DIV（或SPAN）元素与其重叠。

_伪代码：

<common container>
    <image>
    <shadow>
</common container>

您可以使用伪元素:after来创建带阴影的元素：

.imageStyler{
  overflow:hidden;
  display:inline-block;
  position:relative;
  border-radius:5px;
}
.imageStyler img{
 vertical-align:middle;
}
.imageStyler:after{
  content: "";
  position: absolute;
  width: 100%; height: 100%;
  left: 0; top: 0;
  box-shadow: inset 1px 1px 10px #555;
}

    <span class="imageStyler">
        <img src="//placehold.it/100x100/f0f">
    </span>

是的，遗憾的是，如果你真的考虑过这个问题：img:after不起作用。

- Roko C. Buljan

---

完美，正是我所需要的。谢谢伙计！ - NickEckhart

Answer 2

关于内嵌边框怎么样？JS fiddle

border:7px inset grey;border-radius:5px;

#outerDiv {    
    width:100px;
    height:100px;
    border-radius:5px;
    box-shadow:inset 1px 1px 10px #555;
}
#imgimg{border:7px inset grey;border-radius:5px;}

<div id="outerDiv"></div>
<img src="http://lorempixel.com/400/200/sports/" id="imgimg"/>

- Billy