Question

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

这里是来自小提琴的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创建阴影元素：

＆＃13;

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

＆＃13;

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

＆＃13;

是的，遗憾的是，如果你巧妙地想到它：img:after将无效。

Answer 2

插入边框怎么样？ JS fiddle

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何在图像中添加插入框阴影？

2 个答案: