阴影

Shadow / Box Shadow

也常被叫作：投影浮起来的效果卡片影子立体感阴影效果

风格与视觉通常止于「主路径」约 2 分钟读完

你可能会这么说

「给卡片加个淡淡的影子，让它看起来浮在背景上。」

阴影 Shadow / Box Shadow

用投影表达「这个元素在背景之上」，层级越高影子越重，但满屏阴影会脏。

阴影是元素背后的一团渐变投影，作用是告诉用户「这个东西在背景之上、有自己的层级」。它有三个可调的参数：偏移（影子往哪个方向投）、模糊（边缘多柔和）、颜色和深浅。三个参数合起来决定影子的「轻重」——轻的影子刚够让卡片和背景分开，重的影子像把卡片举到灯下。

阴影和间距、圆角一样应该用档位制：全站只保留 2-4 档，比如「普通卡片：最轻」「浮起的面板：中等」「弹窗：最重」。这样用户能凭影子轻重直接判断「谁在最上面」。反过来，满屏都是阴影——每个按钮、每张卡片、每个图标都带影子——页面会显得脏，像贴了一层灰。还有一个常被误解的点：层级应该主要靠间距、深浅、大小来分，阴影只是加强。如果关掉所有阴影页面就分不清层级，说明层级本身没做对，不是阴影加得不够。

给 AI 下单时要说清楚「哪一档给谁用」，而不是「加个阴影让它立体一点」。「立体一点」是感受词，AI 很可能随手给每个元素都糊一层。验收时直接在开发者工具里看 box-shadow 的真实数值，它应该只出现在你定的那几档里。深色模式是另一个翻车高发区：全黑的影子在深色底上等于没加，影子要更淡或改用更亮的色。

长什么样真实可交互，不是截图

✓ 分档：影子轻重 = 层级高低

普通卡片：最轻→浮起面板：中等→弹窗：最重

✕ 阴影灾难每个按钮、卡片、图标都带影子
影子深到像把卡片举到灯下
深色模式下一片黑影子看不清

左：全站只有三档影子，用户凭影子轻重就能判断谁在最上面。右：满屏都是影子、影子过深、深色模式下黑影子等于没加——三种翻车现场。

拆开看，里面有这几块

1
偏移 Offset
影子相对元素往哪个方向偏。多数界面用 0（四周均匀）或只往下一点点，往上偏会很怪。
2
模糊 Blur
影子边缘的柔和程度。模糊越大，影子越淡越散。
3
颜色与透明度 Color
影子的颜色，一般用黑或深色配低透明度，不是纯黑硬糊一层。
4
档位 Scale
全站共用的 2-4 档影子值，决定哪些元素该浮多高。

常见的有哪几种

无阴影None

完全没有投影，元素和背景平齐。

用在：表格、正文、常规输入框

轻阴影Subtle

一层淡淡的小投影，刚够让卡片和背景分开。

用在：普通卡片、下拉菜单

中阴影Medium

明显浮起，元素像是被提了起来。

用在：悬停升档的卡片、浮动的操作条

重阴影Heavy

最重的一档，压在一切之上的感觉。

用在：弹窗、抽屉、通知

容易搞混？这样区分

阴影 ≠ 圆角 Border Radius

圆角改的是形状，阴影是元素背后的光晕/投影。很多人把「柔和一点」理解成加阴影，结果既改形状又加投影，两件事混在一起。给 AI 下单时要说清你要的是哪个。

看圆角

阴影 ≠ 边框 Border

边框是元素边缘上的一条线（有颜色有粗细），阴影是元素背后的投影。边框让元素「有轮廓」，阴影让元素「浮起来」。表格式的控件用边框，浮起的卡片用阴影。

什么时候用得上

卡片浮起

卡片列表统一给轻阴影，鼠标悬停的卡片升到中档，用户就知道哪张可以点。

弹窗压层

弹窗用全站最重的一档阴影，告诉用户「它压在所有内容上面」。

按钮按下

按下时阴影减小甚至消失，模拟「按下去」的物理反馈，比只变色更真实。

你可以这样跟 AI 说

直接复制下面这段，把【】里的换成你的情况。它比一句「帮我加个 X」多说清楚了：改哪里、不许动啥、做完交什么。

【任务】给 [范围] 建立一套分档阴影，不要再随手加
【档位】全站只允许 3 档：
  - 第 1 档（最轻）：普通卡片、下拉菜单
  - 第 2 档（中）：悬停浮起的卡片、浮动操作条
  - 第 3 档（最重）：弹窗、抽屉
【要求】
  - 先给我一份「元素 → 档位」的对照表确认，再动手
  - 禁止给按钮、输入框、图标、正文加阴影，除非它确实需要浮起
  - 阴影用低透明度，不要纯黑硬糊
  - 深色模式下影子要更淡或改用更亮的色，不能是黑乎乎一片
【边界】不动间距、圆角、颜色、字号；不改布局
【交付】列出改了哪些文件、每处从什么值改成什么值；开发者工具里哪个元素的 box-shadow 是证据；你没验证的部分单独说

「分档 + 哪档给谁 + 哪些东西禁止加」三件事写全，AI 才不会把全站糊成一片灰。深色模式的要求单独写，因为这是阴影最容易翻车的地方。

它说「做好了」，你怎么自己验

这是本站的重头戏。AI 最会的不是写代码，是说「已完成」。这一条，它通常最多做到「主路径」这层：真实用户的正常操作能走通，不靠特殊参数。

要亲眼看到这些，才算数

开发者工具里选中元素看 box-shadow，数值只出现在你定的那 3 档里，不是每处一个随机值。
弹窗的阴影明显重于普通卡片：只看影子轻重就能说出「谁在最上面」。
按钮、输入框、正文、图标这些不该浮起的元素没有阴影。
切到深色模式，影子没有变成一团黑，元素和背景依然分得开。
鼠标悬停卡片时如果设计了升档，阴影变化在 0.15 秒内完成，不拖沓。

它常这么糊弄你

「阴影已加上」——但全站每个元素都有影子，页面像贴了一层灰。数一遍带影子的元素。
「我加了很高级的柔光效果」——但影子深到像把卡片举到灯下，廉价感。看透明度数值。
「深色模式也处理了」——但深色下影子是全黑，等于没加，卡片和背景糊在一起。
「悬浮效果很立体」——但悬停时阴影变了 0.5 秒才到位，操作拖泥带水。

阴影这类纯视觉任务最高能验到「主路径」层：浏览器开发者工具里看 box-shadow 的像素值，自己就能查。重点查「是不是落在固定的几档里」和「深色模式下还分不分得开」，不是「影子好不好看」。

考考你选一个你觉得对的

弹窗和普通卡片在阴影上应该是什么关系？

想再深挖一点靠谱出处

box-shadow（阴影）MDN ↗Elevation（阴影高度系统）Material Design ↗

# 阴影 (Shadow / Box Shadow)

> 用投影表达「这个元素在背景之上」，层级越高影子越重，但满屏阴影会脏。

**你可能会这么说**：给卡片加个淡淡的影子，让它看起来浮在背景上。

阴影是元素背后的一团渐变投影，作用是告诉用户「这个东西在背景之上、有自己的层级」。它有三个可调的参数：偏移（影子往哪个方向投）、模糊（边缘多柔和）、颜色和深浅。三个参数合起来决定影子的「轻重」——轻的影子刚够让卡片和背景分开，重的影子像把卡片举到灯下。 阴影和间距、圆角一样应该用档位制：全站只保留 2-4 档，比如「普通卡片：最轻」「浮起的面板：中等」「弹窗：最重」。这样用户能凭影子轻重直接判断「谁在最上面」。反过来，满屏都是阴影——每个按钮、每张卡片、每个图标都带影子——页面会显得脏，像贴了一层灰。还有一个常被误解的点：层级应该主要靠间距、深浅、大小来分，阴影只是加强。如果关掉所有阴影页面就分不清层级，说明层级本身没做对，不是阴影加得不够。 给 AI 下单时要说清楚「哪一档给谁用」，而不是「加个阴影让它立体一点」。「立体一点」是感受词，AI 很可能随手给每个元素都糊一层。验收时直接在开发者工具里看 box-shadow 的真实数值，它应该只出现在你定的那几档里。深色模式是另一个翻车高发区：全黑的影子在深色底上等于没加，影子要更淡或改用更亮的色。

**也叫**：投影、浮起来的效果、卡片影子、立体感、阴影效果

## 你可以这样告诉 AI

```text
【任务】给 [范围] 建立一套分档阴影，不要再随手加
【档位】全站只允许 3 档：
  - 第 1 档（最轻）：普通卡片、下拉菜单
  - 第 2 档（中）：悬停浮起的卡片、浮动操作条
  - 第 3 档（最重）：弹窗、抽屉
【要求】
  - 先给我一份「元素 → 档位」的对照表确认，再动手
  - 禁止给按钮、输入框、图标、正文加阴影，除非它确实需要浮起
  - 阴影用低透明度，不要纯黑硬糊
  - 深色模式下影子要更淡或改用更亮的色，不能是黑乎乎一片
【边界】不动间距、圆角、颜色、字号；不改布局
【交付】列出改了哪些文件、每处从什么值改成什么值；开发者工具里哪个元素的 box-shadow 是证据；你没验证的部分单独说
```

## 怎么验证他真的做到了

通常止于层级：**主路径** — 真实用户的正常操作能走通，不靠特殊参数

- [ ] 开发者工具里选中元素看 box-shadow，数值只出现在你定的那 3 档里，不是每处一个随机值。
- [ ] 弹窗的阴影明显重于普通卡片：只看影子轻重就能说出「谁在最上面」。
- [ ] 按钮、输入框、正文、图标这些不该浮起的元素没有阴影。
- [ ] 切到深色模式，影子没有变成一团黑，元素和背景依然分得开。
- [ ] 鼠标悬停卡片时如果设计了升档，阴影变化在 0.15 秒内完成，不拖沓。

常见糊弄：
- 「阴影已加上」——但全站每个元素都有影子，页面像贴了一层灰。数一遍带影子的元素。
- 「我加了很高级的柔光效果」——但影子深到像把卡片举到灯下，廉价感。看透明度数值。
- 「深色模式也处理了」——但深色下影子是全黑，等于没加，卡片和背景糊在一起。
- 「悬浮效果很立体」——但悬停时阴影变了 0.5 秒才到位，操作拖泥带水。

来源：https://mickerbook.com/reference/t/shadow/