当为 `` 元素设置 `filter: drop-shadow()` 时，若其父容器（如 `.icon-wrapper`）或同级样式（如 `.icon-card`）定义了 `background-color` 或 `border`，浏览器可能将阴影渲染在容器边界而非图像本身——这是因滤镜作用于**绘制上下文（painting context）**，而透明背景图像需确保其渲染层无干扰样式。
CSS filter: drop-shadow() 并非仅作用于元素的“视觉内容”，而是作用于该元素生成的整个绘制框（painting box）。关键在于：如果元素自身具有不透明背景、边框，或其祖先/同级元素存在影响层叠上下文（stacking context）的样式，浏览器会将滤镜应用于该框的外边界，而非图像的实际像素轮廓。
在你的案例中，.icon-card 类同时设置了：
.icon-card {
background-color: var(--color-background); /* ? 不透明背景 */
border-radius: var(--border-radius-right-trapezoid-small);
box-shadow: var(--box-shadow);
padding: 1rem;
width: 12rem;
border: var(--border); /* ? 边框 */
}而 .skills-memoji 是 <img> 的类名，与 .icon-card 同级（即 <img class="icon icon-card skills-memoji">）。此时，<img> 元素虽无显式背景，但因 .icon-card 的 background-color 和 border 在同一渲染层中参与布局，浏览器将其视为一个带背景的“卡片容器”，导致 drop-shadow 被计算并绘制在 .icon-card 的外边缘（即 .icon-wrapper 的尺寸范围），而非 <img> 自身的透明 Alpha 通道边缘。
✅ 正确做法是：将容器样式（背景、边框、内边距）完全移至外层包裹容器（.icon-wrapper），确保 <img> 元素保持语义纯净、视觉上无干扰背景或边框。
立即学习“前端免费学习笔记（深入）”；
✅ 修复后的 CSS 示例：
/* ✅ 将背景、边框、圆角等容器样式移到 .icon-wrapper */
.icon-wrapper {
display: inline-grid;
width: 20%;
justify-content: center;
margin: 1rem;
/* ? 容器样式统一在此定义 */
background-color: var(--color-background);
border-radius: var(--border-radius-right-trapezoid-small);
border: var(--border);
padding: 1rem;
box-shadow: var(--box-shadow);
}
/* ✅ <img> 仅保留图像专属样式：尺寸、滤镜、透明度等 */
.icon {
width: 100%;
height: auto;
max-width: 100%;
display: block;
margin: 0 auto;
}
.icon-card {
/* ❌ 移除 background-color / border / padding / box-shadow */
/* ✅ 保留仅影响图像本身的样式（如 transition） */
}
.skills-memoji {
filter: var(--drop-shadow-image); /* ✅ 现在正确作用于 <img> 像素边缘 */
}? 验证技巧（开发者工具中快速排查）：
- 在浏览器 DevTools 中选中 <img> 元素 → 查看 Computed 面板 → 检查 filter 是否生效，同时观察 background-color 和 border 是否来自该元素自身（应为 transparent / none）；
- 右键 → “Scroll into view” 后，用 Rendering > Paint flashing（Chrome）或 Layout > Highlight layers（Firefox）观察滤镜实际绘制区域；
- 临时添加 outline: 2px solid red 到 .skills-memoji，确认 outline 是否紧贴图像内容（而非撑满 .icon-wrapper）。
⚠️ 注意事项：
- drop-shadow() 对 SVG 内联图标（如 icons8-html-5.svg）同样有效，但需确保 SVG 文件本身无 <rect> 或 <g> 设置了填充背景；
- 若使用 object-fit: contain 或 scale() 等变换，滤镜仍基于原始盒模型计算，建议配合 transform: scale(1) 重置以避免意外缩放阴影；
- 避免在 <img> 上同时设置 opacity < 1 和 filter，可能触发额外合成层，影响性能与渲染精度。
通过将容器职责（背景、边框、间距）与内容职责（图像、滤镜、尺寸）严格分离，你不仅能解决 drop-shadow 错位问题，还能提升组件可维护性与 CSS 架构清晰度。
