Figma 的 Inspect 模式导出的 CSS 为什么和实际效果不一致？
我在 Figma 里用 Inspect 拿到一段按钮的样式，复制到项目里后发现颜色和间距都不对。明明在设计稿里看着没问题，是不是哪里设置漏了？
比如这段 CSS：
.btn {
background: #4F46E5;
padding: 8px 16px;
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}但页面上阴影明显更重，而且 padding 看起来也比设计稿大，是不是 Figma 导出时没考虑缩放或者字体影响？
1 条解答
先检查一下设计稿和网页上的元素尺寸是否一致，特别是如果有用到相对单位的话。然后确认一下浏览器的缩放比例，有时候浏览器不是 100% 缩放也会导致视觉上的差异。
接下来，看看 Figma 中的样式是不是应用了某些混合模式或者特殊效果，这些可能在纯 CSS 中无法完全复现。最后，确保你的项目中没有其他 CSS 规则覆盖了这些样式。
直接用开发者工具检查一下网页上的实际样式，看看和 Figma 导出的有什么不一样。可能需要手动调整一些值来达到预期的效果。