为何从Figma复刻的box-shadow属性与设计效果不符？

我在复刻Figma卡片设计时，UI效果完全不符合预期，尤其是白色阴影方向错误，调整参数后仍未解决问题，请求协助。

参考素材 #

• Figma卡片设计：
  
• Figma卡片样式参数：
  

我的实现代码 #

<div 
className='flex flex-col bg-custom-gray-tertiary rounded-[12px] min-w-[350px] max-w-[350px] gap-6 p-6'
 style={{boxShadow: `
           0 4px 4px rgba(0, 0, 0, 0.1), 
           0 12px 32px -12px rgba(0, 0, 0, 0.1), 
           0 6px 12px rgba(255, 255, 255, 0.04), 
           0 1px 1px rgba(255, 255, 255, 0.2)
        `,
       }}

当前效果 #

• 初始错误效果：
  
• 调整参数后的效果（仍不符合设计）：
  

问题分析及修复 #

你的白色阴影方向完全搞反了：Figma里的白色阴影是向上偏移的高光，用来模拟卡片上边缘的提亮，增强立体感，但你写的是向下偏移，导致效果相反。

修改方案：

1. 将白色阴影的垂直偏移改为负值（向上），对应Figma里的高光方向
2. 保持深色阴影向下偏移，模拟下方投影

修改后的代码：

<div 
className='flex flex-col bg-custom-gray-tertiary rounded-[12px] min-w-[350px] max-w-[350px] gap-6 p-6'
 style={{boxShadow: `
           /* 深色投影：向下偏移，模拟卡片下方阴影 */
           0 4px 4px rgba(0, 0, 0, 0.1), 
           0 12px 32px -12px rgba(0, 0, 0, 0.1), 
           /* 白色高光：向上偏移，还原Figma的上边缘提亮效果 */
           0 -6px 12px rgba(255, 255, 255, 0.04), 
           0 -1px 1px rgba(255, 255, 255, 0.2)
        `,
       }}

更精准的方法 #

直接从Figma导出CSS：选中卡片 → 右键 → 复制 → 复制CSS，能得到Figma生成的精确阴影参数，避免手动转换出错。

内容的提问来源于stack exchange，提问作者Abdullah Ahmad