如何为图片添加底部阴影 实现示例图同款阴影效果

这种柔和、仅在元素底部弥散的自然阴影，不需要额外制作阴影素材，用前端CSS或者设计软件图层样式都能快速实现：

• 前端CSS实现（适配网页开发场景）
  直接给图片元素加box-shadow属性即可，不要给全方向加阴影，通过参数控制阴影只向下扩散、边缘柔和，下面是调好的可直接复用的代码：

  img {
    /* 原有图片样式保留，追加下面这行即可 */
    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.15);
    /* 圆角图片可保留下面这行，直角图删除即可
    border-radius: 4px;
    */
  }
  

  参数可以根据实际视觉效果微调：

  • 第一个值0：水平偏移为0，阴影不会向左右偏移
  • 第二个值8px：垂直向下偏移8px，确保阴影集中在底部
  • 第三个值16px：模糊半径，数值越大阴影边缘越柔和弥散
  • 第四个值-4px：收缩半径，设为负值可以收掉图片顶部、左右两侧多余的阴影，避免出现四周都带阴影的违和感
  • 最后一个颜色值里的0.15是阴影透明度，可根据页面背景深浅在0.1-0.2区间调整，数值越小阴影越淡

  如果想要更有层次的纸质投影质感，可以用双层阴影叠加的写法，效果更贴近示例：

  img {
    box-shadow: 
      0 3px 6px -3px rgba(0, 0, 0, 0.08),
      0 10px 18px -6px rgba(0, 0, 0, 0.12);
  }
  

  注意：如果是矩形外边缘的规整阴影，不要用filter: drop-shadow()，这个属性会沿着图片内容的轮廓投射阴影，只适合透明png元素的轮廓投影场景，出不来示例里规整的块级底部阴影。

• 设计稿实现（适配UI设计场景）
  在Figma、Photoshop这类设计软件里直接给图片图层加投影样式，参数逻辑和CSS一致：投影角度设为90度（垂直向下），距离8-10px，模糊12-18px，扩展-4~-6px，阴影透明度设为10%-20%，就能调出和示例完全一致的效果。

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