如何将带inset的CSS box-shadow转换为SVG阴影？

答案是没法直接用drop-shadow滤镜转换，原因有两个：

• SVG的drop-shadow滤镜本身不支持inset属性，它只能生成元素轮廓外的阴影，没法模拟内阴影的渲染逻辑；
• drop-shadow只能处理单一阴影层，没法直接对应原CSS里的多个内阴影。

不过不用重新制作元素，你可以通过自定义SVG滤镜来精准复刻原box-shadow的效果，原理是用SVG滤镜的基础组合来模拟内阴影的绘制逻辑。

针对你给出的box-shadow代码，这里是对应的SVG滤镜实现：

首先在页面中插入隐藏的SVG定义滤镜：

<svg width="0" height="0" viewBox="0 0 0 0">
  <defs>
    <filter id="custom-inset-shadows">
      <!-- 第一个内阴影：inset -1px -2px 0px rgba(255,255,255,0.50) -->
      <feFlood flood-color="rgba(255,255,255,0.50)" result="shadow1"/>
      <feComposite in="shadow1" in2="SourceAlpha" operator="out" result="shadow1-out"/>
      <feOffset dx="-1" dy="-2" result="shadow1-offset"/>
      <feComposite in="shadow1-offset" in2="SourceAlpha" operator="in" result="shadow1-inset"/>
      
      <!-- 第二个内阴影：inset 1px 1px 4px rgba(255,22,64,0.16) -->
      <feFlood flood-color="rgba(255,22,64,0.16)" result="shadow2"/>
      <feComposite in="shadow2" in2="SourceAlpha" operator="out" result="shadow2-out"/>
      <feOffset dx="1" dy="1" result="shadow2-offset"/>
      <feGaussianBlur stdDeviation="4" result="shadow2-blur"/>
      <feComposite in="shadow2-blur" in2="SourceAlpha" operator="in" result="shadow2-inset"/>
      
      <!-- 叠加阴影与原元素 -->
      <feMerge>
        <feMergeNode in="shadow1-inset"/>
        <feMergeNode in="shadow2-inset"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
</svg>

然后在CSS里给目标元素应用这个滤镜：

.your-target-element {
  filter: url(#custom-inset-shadows);
}

简单解释下滤镜逻辑： #

• feFlood生成阴影对应的纯色层；
• feComposite配合SourceAlpha（元素的透明度轮廓）把阴影限制在元素内部，模拟inset的效果；
• feOffset对应box-shadow的偏移值；
• feGaussianBlur对应box-shadow的模糊半径；
• 最后用feMerge把多个内阴影层和原元素叠加，还原原box-shadow的视觉效果。

你只需要根据原box-shadow的参数，调整滤镜里的flood-color（阴影颜色）、dx/dy（偏移）、stdDeviation（模糊半径）即可匹配不同的内阴影需求。

内容的提问来源于stack exchange，提问作者sir-haver