基本上,我想在图像上有一种凹陷效果,就像这个小提琴中的外部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:之后将无法工作.