这篇教程会带你在 Figma 里做一张「玻璃拟态（Glassmorphism）」卡片，并把它做成可复用组件：卡片背景半透明 + 背景模糊 + 双层阴影 + 高光边。你最终会得到一套可直接复制的参数，同时知道每个参数背后的作用与取舍。
1）新建一个 Frame（例如 1440×900），命名为 BG。
2）给 BG 画一个氛围背景：最简单做法是放一个大矩形，填充用 Linear/Radial Gradient。建议用 2-3 个低饱和色做渐变（例如蓝灰 → 紫灰 → 米白），让玻璃卡片有“可被折射”的环境信息。
3）可选：再放几个大圆形/模糊色块（Opacity 10%-25%），用 Layer Blur 30-80，制造空间感。注意：这些色块是为了让玻璃的模糊更明显。
1）按 R 画一个矩形（例如 420×260），命名为 Card/ 。
2）圆角建议 18-24（移动端可更大一点）。
3）填充（Fill）设置为白色，但把透明度降到 8%-16%。起步可以用：#FFFFFF / 12%。
4）关键点：玻璃不是“白色块”，而是“有环境色的透明材质”。如果你发现卡片太死白，可以把填充改成略带环境色（例如 #F5F7FF），同时透明度再低一点。
1）选中 Card/ ，在右侧 Effects 里点 +，选择 Background Blur。
2）模糊值建议从 14-24 起步。常用组合：Background Blur = 18。
3）什么时候该加大？
- 背景细节多、对比强：模糊值需要更大（20-32）。
- 背景很干净：模糊值可以小一点（10-18），否则会显得“磨砂塑料”。
4）检查标准：卡片背后的形状应被“柔化但仍能辨认色相/大形”，不要糊成一团灰。
1）给 Card/ 加 Stroke：1px，颜色用白色，透明度 18%-30%（例如 #FFFFFF / 24%）。Stroke 位置建议 Inside。
2）再做一层内高光（推荐）：复制 Card/ （Ctrl/Cmd + D），命名为 Card/Highlight。
3）把 Card/Highlight 的填充透明度降到 0（或很低），只保留 Stroke，但让 Stroke 更亮一点（例如 #FFFFFF / 35%），并把圆角略微减小 1-2（比如 是 20，这层做 18-19），产生“内侧光边”。
4）如果你想更像玻璃：在 Highlight 上加一个非常轻的 Layer Blur 0.5-1（可选），让边缘更柔。
玻璃卡片的阴影通常不是一个黑影就完事，而是「近阴影 + 远阴影」两层叠加，近的更实，远的更散。
在 Card/ 上添加两条 Drop Shadow（Effects 里连续加两次）：
参数建议（可直接照抄）：
Shadow 1（近）：X 0 / Y 8 / Blur 24 / Spread 0 / 颜色 #000000 / 12%
Shadow 2（远）：X 0 / Y 24 / Blur 60 / Spread -10 / 颜色 #000000 / 10%
调参逻辑：
- 想“更轻”：先降不透明度，再降 Y。
- 想“更浮”：加大第二层的 Y 与 Blur，让远影更明显。
- 背景很暗：阴影不透明度要更低，改用更柔的 Blur。
玻璃卡片最常翻车的是文字可读性。做法是把内容区域做成一个轻微的“内容底”，让文字有稳定对比。
1）在卡片里再放一个矩形（或 Auto Layout 容器），命名为 Card/Content。
2）填充用白色 6%-10%（例如 #FFFFFF / 8%），圆角略小（比如 14-16）。
3）如果卡片内容区域仍然不够清晰：给 Content 加 1px 的淡描边（#FFFFFF / 18%），并把 Background Blur 提升 2-6。
4）字体建议：正文 14-16，行高 1.4-1.6；标题 18-22；尽量不要使用过细字重（玻璃背景会吃掉笔画）。
1）选中 Card/ + Highlight + Content + 文字等，按 Shift + A 建立 Auto Layout 容器。
2）Padding 建议：24（四周），间距 12-16。
3）把卡片宽度设为 Fill container / 或固定宽度，根据你的界面需求决定。
4）把常用参数做成可改的属性：
- 圆角： /Content 同步变化（可以用变量或手动约定）。
- Background Blur：18 作为默认，提供 12/18/24 三档。
- 阴影：提供 Light/Default/Strong 三档（用组件变体最方便）。
Q1：为什么我看不到背景模糊效果？
A：检查是否用的是 Background Blur（不是 Layer Blur）；并确保卡片背后真的有内容（色块、图片、渐变）。背景太干净也会“看不出来”。
Q2：卡片看起来像塑料，不像玻璃？
A：通常是填充不透明度太高或模糊太大。先把填充降到 8%-14%，再把模糊控制在 14-24；同时加上描边与内高光，质感会立刻变“玻璃”。
Q3：文字不清晰怎么办？
A：加一个内容底（Card/Content），或把卡片填充稍微提高 2%-4%，并把背景高对比元素移开一点。不要只靠加粗字重解决。
Q4：导出后边缘发灰/锯齿？
A：尝试把 Stroke 从 Inside 改为 Center，或把高光层加一点点 blur；导出 PNG 时确保 2x/3x，避免低分辨率导致边缘发灰。
你可以把下面当作默认模板：
- Fill：#FFFFFF / 12%
- Background Blur：18
- Stroke：1px Inside，#FFFFFF / 24%
- 内高光：1px Inside，#FFFFFF / 35%，圆角 -2
- Shadow 1：0, 8, 24, 0，#000 / 12%
- Shadow 2：0, 24, 60, -10，#000 / 10%
做完这一套后，你的玻璃卡片在绝大多数渐变/图片背景上都会成立。
