能否通过纯CSS仅为PNG相框右侧添加投影？技术问询

我给你两个实用的方案，都能完美适配你那不规则形状的PNG相框，只在右侧生成贴合形状的投影：

方案一：伪元素 + CSS Mask（最简洁） #

这个方案不需要额外的HTML元素，只用伪元素模拟投影，再通过遮罩隐藏不需要的部分：

<div class="frame-wrapper">
  <img src="random-image.jpg" alt="展示图片" class="inner-image">
  <img src="your-frame.png" alt="相框" class="frame">
</div>

.frame-wrapper {
  position: relative;
  display: inline-block; /* 让容器贴合相框大小 */
}

.inner-image {
  position: absolute;
  top: 20px; /* 根据相框内边距调整数值 */
  left: 20px;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  object-fit: cover;
  z-index: 1;
}

.frame {
  position: relative;
  z-index: 2;
}

.frame::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 复制相框的形状 */
  background-image: url(your-frame.png);
  background-size: 100% 100%;
  /* 添加右侧方向的投影，参数可按需调整 */
  filter: drop-shadow(6px 0 10px rgba(0, 0, 0, 0.4));
  /* 用遮罩隐藏左侧的投影部分 */
  mask: linear-gradient(to left, rgba(0,0,0,1) 40%, transparent 100%);
  z-index: 1;
}

原理说明： #

• 伪元素::after完全复制了相框的形状，确保投影能贴合异形边缘；
• drop-shadow给伪元素加阴影，但我们通过mask的线性渐变，把伪元素的左半部分（包括对应的阴影）完全遮掉，只保留右侧的投影区域；
• 调整drop-shadow的偏移量、模糊半径、透明度，以及mask的渐变位置，就能得到最自然的右侧投影效果。

方案二：克隆元素 + Clip-Path（兼容性更友好） #

如果担心部分浏览器对CSS Mask的支持，这个方案用clip-path裁剪克隆的相框元素，只保留右侧阴影：

<div class="frame-wrapper">
  <img src="random-image.jpg" alt="展示图片" class="inner-image">
  <!-- 克隆的相框用于生成投影 -->
  <img src="your-frame.png" alt="投影" class="frame-shadow">
  <!-- 原相框放在最上层 -->
  <img src="your-frame.png" alt="相框" class="frame">
</div>

.frame-wrapper {
  position: relative;
  display: inline-block;
}

.inner-image {
  position: absolute;
  top: 20px;
  left: 20px;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  object-fit: cover;
  z-index: 1;
}

.frame-shadow {
  position: absolute;
  top: 0;
  left: 8px; /* 向右偏移，让投影出现在右侧 */
  z-index: 2;
  filter: drop-shadow(0 0 10px rgba(0,0,0,0.5));
  /* 裁剪掉左半部分，只保留右侧区域的投影 */
  clip-path: inset(0 0 0 45%);
  opacity: 0.8;
}

.frame {
  position: relative;
  z-index: 3;
}

原理说明： #

• 克隆一个相框元素，向右偏移后添加drop-shadow；
• 用clip-path: inset()裁剪掉元素的左半部分，这样左侧的阴影就被裁掉了，只剩下右侧贴合相框形状的投影；
• 原相框放在最上层，挡住克隆元素的可见部分，只露出右侧的阴影。

这两个方案都能完美解决你遇到的问题——不管相框是圆形、异形还是其他复杂形状，投影都会精准贴合右侧边缘，而且完全用纯CSS实现，不需要额外的图片处理！

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