如何向图像添加内嵌框阴影？

Question

基本上，我想要在图像上有一种凹陷的效果，如这个小提琴中的外部 div 所示：http://jsfiddle.net/sK5bB/32/

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

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

Answer 1

对于图像，您需要将其与具有该框阴影的 DIV（或 SPAN）元素重叠。

_伪代码：

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

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

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

.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;
}

是的，可悲的是，如果你天真地思考一下：img:after行不通。