如何让图片box-shadow阴影忽略padding仅围绕图片本身显示

默认的外凸box-shadow是沿元素的边框外沿渲染的。你给img设了10px padding，这部分属于元素的内部盒空间，会把元素的边框边界撑得比实际图片内容大10px，阴影自然就沿着padding的外沿显示，和图片本身隔了10px的距离。
你之前试了用margin换padding没成，基本是flex布局下宽度没重新计算导致的，思路本身没问题。

方案1：零结构改动，用drop-shadow滤镜替代box-shadow #

filter: drop-shadow()不按元素盒模型边界生成阴影，只会沿着元素内不透明的可见内容轮廓渲染。img的padding区域默认透明，会被自动忽略，阴影刚好贴合带圆角的图片本身。
直接替换原有阴影属性即可，参数和你原来的阴影完全一致：

.front-images img {
  width: 100%;
  border-radius: 10px;
  padding: 10px;
  transition: 0.5s;
  /* 删除原box-shadow，添加下方属性 */
  filter: drop-shadow(0 0 20px rgba(0,0,0,0.5));
}

提示：drop-shadow不支持阴影扩展半径参数，且会把元素上所有不透明区域（包括设置了背景色的padding区域）算入轮廓范围，你当前代码里img没设背景，参数也没有扩展半径，完全适配；如果后续要加扩展半径、多阴影叠层，或者给img加背景色，选方案2更合适。

方案2：调整盒模型，用间距属性替代img上的padding（全特性兼容） #

把控制图片间距的属性从img的padding，换成flex容器的gap或者img的margin，让img本身没有内边距，box-shadow自然会贴合图片外沿渲染。
参考代码：

.front-images {
  margin-top: 2%;
  display: flex;
  justify-content: center;
  gap: 20px; /* 直接用flex gap控制图片间的间距，不需要给img加内外边距 */
}
.front-images img {
  /* 按你实际的布局需求调整宽度，减去gap占的宽度即可 */
  width: calc((100% - 40px) / 3);
  border-radius: 10px;
  transition: 0.5s;
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.5);
}

这个方案支持box-shadow的所有特性，兼容性覆盖所有支持box-shadow的浏览器，适合需要复杂阴影效果的场景。

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