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

2023年4月21日 123次阅读

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

这是来自小提琴的我的CSS(它只适用于div,而不适用于图像)：

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

最佳答案 对于图像,您需要将其与具有该阴影的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：之后将无法工作.

点赞