含透明区域图片添加box-shadow的异常问题求助

嘿，我完全懂你遇到的这个坑！当图片存在透明区域时，直接给容器加box-shadow会因为阴影是跟着容器的矩形盒模型走的，完全不贴合图片的实际形状，看起来就特别违和。咱们先看看你提供的代码片段：

.framed-image { 
  background: url("https://cdn.pbrd.co/images/HfNQr1M.png") no-repeat; 
  background-size: cover; 
  padding: 18px; 
  object-fit: cover; 
} 
.image-menu { 
  width: 300px; 
  height: 200px; 
  background-size: 100% 100% !important; 
  -moz-box-shadow: 0 3px 8px rgb(136, 136, 136); 
  -webkit-box-shadow: 0 3px 8px rgb(136, 136, 136);
  box-shadow: 0 3px 8px rgb(136, 136, 136);
}

问题根源 #

你这里是用background-image把图片放在容器里，而box-shadow是作用在容器的矩形盒模型上的——不管图片有没有透明区域，阴影都会是一个完整的矩形，自然和图片的不规则透明部分不匹配，出现“异常”效果。

解决方案：用filter: drop-shadow()替代box-shadow #

drop-shadow滤镜和box-shadow的参数几乎一样，但它是跟着元素的实际可见像素生成阴影的，会自动忽略透明区域，完美贴合图片形状。分两种场景给你方案：

场景1：如果是用<img>标签直接展示图片

直接给img标签加filter就行：

.framed-image img {
  filter: drop-shadow(0 3px 8px rgb(136, 136, 136));
  /* 不需要再给容器加box-shadow */
}

场景2：你当前用background-image的情况

可以把背景图片放到容器的伪元素上，然后给伪元素加drop-shadow：

.image-menu {
  width: 300px;
  height: 200px;
  position: relative;
  /* 去掉原来的box-shadow相关样式 */
}

.image-menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://cdn.pbrd.co/images/HfNQr1M.png") no-repeat;
  background-size: 100% 100%;
  filter: drop-shadow(0 3px 8px rgb(136, 136, 136));
}

小提示 #

• drop-shadow的参数格式和box-shadow一致：drop-shadow(offset-x offset-y blur-radius color)，你可以直接复用原来的参数。
• 现代浏览器都支持这个滤镜，如果要兼容非常老旧的浏览器，可以考虑用SVG滤镜的方式，但一般来说drop-shadow足够满足需求了。

内容的提问来源于stack exchange，提问作者Mehdi Karimi