阴影不可见的根本原因是图层混合模式非Normal，需依次通过设计面板检查、JSON验证、DevTools审查、源文件比对及临时切换Normal来定位并修复。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您在 figma 中为图层设置了阴影效果，但导出为 png、svg 或嵌入开发环境后阴影不可见，则可能是由于图层混合模式被意外更改为非 normal 值，导致阴影渲染被遮蔽或失效。figma 的阴影（effect）依赖于图层处于标准合成上下文，而部分混合模式（如 multiply、screen、overlay 等）会干扰阴影的 alpha 通道叠加逻辑，使阴影像素被裁剪、压暗或完全忽略。以下是定位与验证图层混合模式是否为 normal 的具体路径：一、检查右侧设计面板中的混合模式下拉菜单
该方式可直接读取当前选中图层的混合模式设置，是判断其是否为 Normal 的第一手依据。若此处显示非 Normal 选项，即为阴影消失的潜在原因。
1、在左侧图层面板中单击目标图层（确保仅选中一个含阴影的图层）。
2、观察右侧“设计”面板中“图层”区域顶部，查找标有“混合模式”或“Blend Mode”的下拉控件。
3、确认下拉菜单当前显示的值是否为 Normal；若显示为 Multiply、Screen、Overlay、Soft Light 等其他选项，则需手动切换回 Normal。
二、通过 JSON 导出数据验证 blendMode 字段值
该方法绕过 UI 渲染状态，直接读取图层元数据中的原始 blendMode 属性，可排除界面缓存或显示异常导致的误判。
1、右键点击目标图层，在弹出菜单中选择“Export as JSON”或点击右上角“⋯”菜单 → “Export for Developers” → “JSON”。
2、保存生成的 .json 文件，用 VS Code 或记事本打开，使用快捷键 Ctrl+F 搜索关键词 "blendMode"。
3、定位到对应图层节点，检查其值是否为 "normal"（小写）；若为 "multiply"、"screen" 等字符串，则证实混合模式异常。
三、在浏览器 DevTools 中检查渲染后 CSS 属性
当设计稿已发布为链接或嵌入网页预览时，此方法可验证阴影是否被浏览器实际渲染，以及 mix-blend-mode 是否干扰了 box-shadow 的层叠顺序。
1、打开 Figma 发布链接，或使用“Present”模式进入全屏预览。
2、在页面中右键目标元素 → “Inspect Element”，定位到该图层对应的 HTML 元素（通常为 div 或 canvas 内嵌节点）。
3、在 Styles 面板中查找是否存在 mix-blend-mode 属性；若存在且值不为 normal，则说明混合模式已被继承或注入，可能压制 box-shadow。
四、比对 Sketch/Figma 源文件原始设置
若该图层源自 Sketch 导入或团队协作中复用的组件，其混合模式可能在源文件中已被预设，且未在 Figma 中显式重置。
1、在 Figma 中双击进入该图层所属的组件主实例（Component Main）。
2、在组件内部再次检查右侧设计面板中的混合模式字段。
3、若仍非 Normal，返回源设计文件（Sketch 或原始 Figma 文件），在图层属性中将混合模式显式设为 Normal，并重新同步或替换组件。
五、临时禁用混合模式进行阴影可见性验证
此操作用于快速隔离问题：若切换为 Normal 后阴影立即恢复，则可确认混合模式是根本诱因。
1、选中目标图层，在右侧设计面板中点击混合模式下拉菜单。
2、从列表中选择 Normal，注意观察画布中阴影是否实时重现。
3、若阴影恢复，说明此前混合模式确为干扰源；若仍未出现，需进一步排查阴影参数本身（如 Blur=0、Color 透明度为 0% 或被父容器 overflow: hidden 裁剪）。
