box-shadow = 元素的"矩形外框"投影，无论内容是什么都按 border-box 投影；最常用，但透明区域不会让阴影穿过。text-shadow = 仅文字字形的阴影，多层叠加可做霓虹/描边/长投影。filter: drop-shadow() = 跟随实际不透明像素投影，透明 PNG / SVG 图标用它能得到沿轮廓的真实阴影；缺点是性能比 box-shadow 略差，且不支持 inset 和 spread。规则：矩形容器 → box-shadow；文字 → text-shadow；图标/不规则形 → drop-shadow。

单层阴影看起来"假"——真实物体的阴影由两部分组成：紧贴物体的硬边小阴影（key shadow）+ 远处柔和大阴影（ambient shadow）。Material 把它们拆成 2–3 层 box-shadow 叠加：一层 y 偏移大、blur 大、alpha 低（环境光散射）+ 一层 y 偏移小、blur 小、alpha 高（直射光投影）+ 可选第三层做边缘细节。单层 8px blur 黑 0.2 看起来像贴纸；Material 8dp 三层叠加就有真实立体感。本工具的 Material 1/4/8/16/24dp 预设是 Google 官方规范值，可直接用。

做"凹陷"效果——输入框聚焦、表盘、卡槽、被按下的按钮、Neumorphism 凹面材质。<code>inset</code> 让阴影画在元素内侧而非外侧，视觉上元素就像往背景里"嵌"进去。常用做法：白色卡片背景 + 浅灰 inset 阴影 = 凹陷输入区。注意 inset 不影响布局（不占空间），所以用它代替 border 做"按下"效果不会引起重排。

blur 只让边缘渐变变柔；spread 真的让阴影变大——正值整体外扩，负值整体内收。常见组合：(1) 柔和环境阴影：blur 大、spread 0，例如 0 8px 24px rgba(0,0,0,.15)；(2) 彩色发光环：blur 中等、spread 正值、颜色饱和，例如 0 0 24px 4px rgba(108,99,255,.5)；(3) focus ring 替代 outline：blur 0、spread 3、半透明主色，例如 0 0 0 3px rgba(108,99,255,.4)，比浏览器默认 outline 更可控。text-shadow 和 drop-shadow 都没有 spread。

少量阴影没问题，大量 + 大 blur + 实时变化要警惕。box-shadow 由 GPU 合成，单层固定阴影（卡片、按钮）成本可忽略。但 (1) 超大 blur（>50px）+ (2) 多层叠加（5+ 层）+ (3) 高频改变（hover 动画 box-shadow）三者组合会触发重新光栅化，长列表（100+ 元素）可能卡顿。优化：把 hover 改成 transform 缩放 + opacity 变化（这两个是 GPU 友好的）；或预先备好两个 shadow 用 opacity 切换（compositor 层）。drop-shadow 性能略差于 box-shadow，但仍算便宜。

核心两点：(1) 背景色不能是纯白或纯黑——需要一个有"中间灰"基调的背景（例如 #e0e5ec），这样深浅两层阴影才能同时被看到；纯白背景上浅色阴影直接消失，纯黑背景上深色阴影直接消失。(2) 元素颜色 = 背景色（或非常接近），让"凸起感"完全靠阴影来表达，而不是颜色对比；元素与背景一旦撞色就会显得"脏"或"贴片"。本工具的 Neumorphism 凸/凹预设按这个原则调好了，但需要放到合适背景上才好看——纯白/纯黑底下的 Neumorphism 视觉对比度就是不行。