阴影
Shadow
初级通用阴影（Shadow）是元素周围或文字背后的明暗效果，常用来暗示界面中的遮挡关系和距离。它能帮你区分浮起的弹窗与页面内容，例如让弹窗看起来位于卡片之上。
你可能会说：「这个弹窗和后面的页面贴得太近了，能不能让它看起来像浮在页面上？」
动手看看报表导出弹窗
拖动三个参数，看弹窗与报表卡片的前后关系怎么变。也可以悬停按钮，或按 Tab 查看焦点状态。
要点阴影怎样让界面产生层次感？
- 1
先看阴影跟着谁走
卡片和弹窗通常用元素阴影，文字也可以有自己的阴影。你描述需求时说清楚阴影加在哪个对象上，AI 才不会把整块区域变暗，或给弹窗里的每行字都加效果。
- 2
用偏移与模糊控制感觉
阴影的位置由水平、垂直偏移决定，边缘软硬由模糊程度影响；颜色和透明度决定它有多显眼。如果弹窗像粘在背景上，可以先试较淡、边缘较软的阴影，再看是否需要增加偏移。
- 3
把阴影当作辅助线索
阴影能帮用户看出哪个元素像是浮在上面，但它不负责真的改变覆盖顺序。因为屏幕、背景和明暗模式都会影响阴影的可见度，重要的边界和文字可读性还需要靠底色、边框与对比度支撑。
容易混淆的地方
阴影改变的是视觉感受；层级（z-index）决定重叠元素谁盖住谁。弹窗被导航栏挡住时，只加阴影解决不了遮挡。阴影也不同于边框：边框直接标出元素轮廓；阴影通常向外延展，用来暗示它与背景之间有距离。
什么时候用
适合用
- 做后台数据卡片时，你想让卡片与同色页面背景分开，又不想给每张卡片画明显的边框。
- 做弹窗或气泡卡片时，你想让用户看出它浮在当前页面内容上方。
- 做拖拽排序时，你想让正在移动的列表项与留在原位的列表项有所区分。
不适合用
- 弹窗被固定导航栏实际盖住时，先检查定位和层级；阴影不会改变谁在上面。
- 表格行列需要清楚分隔时，用分割线或留白更直接，给每个单元格加阴影反而难读。
- 按钮文字与背景颜色太接近时，先调整颜色对比度；文字阴影不能替代可读的配色。
练一练选一个答案，看看解释
你做了一个设置弹窗：它能正常盖在页面上，但边界不明显，看起来和背后的白色卡片连在一起。你会先让 AI 改什么？
让 AI 帮你做复制给 AI Agent 直接用
请给设置弹窗增加克制的元素阴影，让它在白色卡片背景上看起来略微浮起。保持现有覆盖顺序和文字样式不变；同时检查浅色、深色模式下弹窗边界是否仍能辨认。