【css】给图片添加内阴影

cvory

于 2019-11-21 18:34:22 发布

阅读量1.8k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_40593656/article/details/103188531

版权

css 专栏收录该内容

6 篇文章

订阅专栏

需求：给图片添加内阴影
原理：
给img外面套一个div
加给div不会生效因为图片会遮住

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

css:

.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)

参考链接：https://blog.csdn.net/wust_cyl/article/details/83656457