如何给图片增加内阴影？

如果你想给图片加入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的基友关系

---------------------

作者：wust_cyl

来源：CSDN

原文：https://blog.csdn.net/wust_cyl/article/details/83656457

版权声明：本文为博主原创文章，转载请附上博文链接！