如何为无背景图片实现边缘贴合的hover发光效果？

box-shadow是作用在元素的盒模型边界上的——哪怕你的PNG是透明背景，<img>元素本身依然是一个矩形的盒子，所以阴影会沿着这个矩形的边缘生成，完全不会识别图片里的透明区域，自然就没法贴合桌子的实际轮廓。

1. 用filter: drop-shadow()（最简单的方案） #

这个CSS滤镜是根据图片的实际像素轮廓生成阴影，会自动忽略透明区域，完美贴合图片边缘。代码示例：

img:hover {
  /* 参数：水平偏移 垂直偏移 模糊半径 颜色 */
  filter: drop-shadow(0 0 12px rgba(240, 200, 80, 0.7));
}

和box-shadow的参数写法几乎一致，但效果完全不同——它会跟着你桌子图片的真实边缘发光。

2. 自定义SVG滤镜（复杂效果需求） #

如果需要更精细的发光效果（比如多层渐变发光、不同透明度的光晕），可以用SVG滤镜实现：
首先在HTML里添加一个隐藏的SVG（用来定义滤镜）：

<svg style="display: none;">
  <filter id="tableGlow">
    <!-- 提取图片的不透明区域并模糊 -->
    <feGaussianBlur in="SourceAlpha" stdDeviation="6" result="blurLayer"/>
    <!-- 给模糊层加颜色（可选，默认是黑色） -->
    <feFlood flood-color="#f5d061" flood-opacity="0.6" result="glowColor"/>
    <feComposite in="glowColor" in2="blurLayer" operator="in"/>
    <!-- 把发光层和原图合并 -->
    <feMerge>
      <feMergeNode/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
</svg>

然后在CSS里调用这个滤镜：

img:hover {
  filter: url(#tableGlow);
}

这种方式可以灵活调整发光的颜色、模糊程度和透明度，适合追求细节的场景。

注意点 #

• 如果只需要基础的贴合边缘发光，drop-shadow完全够用，没必要用复杂的SVG滤镜。
• 兼容性：现代浏览器（Chrome、Firefox、Edge、Safari 10+）都支持这两种方案，无需额外兼容处理。

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