css3 - 如何给图片增加内阴影

如何给图片增加内阴影？

如果你想给图片加入box-shadow属性，你可以先试试。

我们可以在img外面套一层div，给·div属性加box-shadow是可以的，但是仅仅这样是不可以的，因为图片比内阴影层级高会覆盖它，所以我们应该修改z-index属性

<div class='box-shadow'>
  <img src='https://image.zhangxinxu.com/image/study/s/s256/mm1.jpg'>
</div>

.box-shadow {
    display:inline-block;
    box-shadow:inset 5px 5px 10px #06c;
}

img {
    position: relative;
    z-index:-1;
    vertical-align: top;
}

为什么要加position:relative;因为z-index属性在静态元素上不起作用（position:static)

为什么要加vertical-align:top；推荐浏览张鑫旭的博客CSS深入理解vertical-align和line-height的基友关系