为何带SVG背景的div及img元素仅显示顶部和左侧边框？

这是因为你给元素添加的drop-shadow(5px 5px 5px royalblue)滤镜，会向**右下方向（x轴5px，y轴5px）**生成阴影，这个阴影刚好覆盖在元素的底部和右侧边框之上，导致这两个方向的边框被遮挡，看起来像是只显示了顶部和左侧边框。

解决办法 #

• 调整阴影偏移量，避免与边框重叠：将滤镜改为drop-shadow(0 0 5px royalblue)，阴影会均匀扩散，不会挡住边框；
• 给元素添加内边距，留出阴影空间：比如设置padding: 6px（大于阴影偏移的5px），让边框和阴影之间有空隙，避免遮挡；
• 将滤镜应用到元素的子内容上，而非元素本身：比如在你的SVG示例中，只给内部的circle加滤镜，SVG本身保留边框，这样SVG的边框不会被阴影遮挡。

示例代码对比 #

原问题中的SVG代码：

<svg xmlns='http://www.w3.org/2000/svg' width='210' height='210' style='border: 3px dashed coral;'>
  <circle cx='100' cy='100' r='100' fill='royalblue' style='filter: drop-shadow(5px 5px 5px royalblue);' />
</svg>

修改后（给SVG加内边距，避免阴影遮挡边框）：

<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' style='border: 3px dashed coral; padding: 5px;'>
  <circle cx='105' cy='105' r='100' fill='royalblue' style='filter: drop-shadow(5px 5px 5px royalblue);' />
</svg>

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