用CSS阴影生成器调作品集层次感，核心就三件事：叠两到三层阴影、颜色用深蓝或深灰而非纯黑、模糊半径给大扩散半径给小。作品集页面做得干净不等于有记忆点，面试官一天看几十份，视线停留时间极短，阴影是成本最低、见效最快的层次推手。下面把参数含义、操作步骤、适用场景和常见错误一次讲清楚。
为什么作品集需要阴影
页面干净到像白开水，看完记不住任何东西，这是很多人卡住的地方：技术不差，排版也工整，但就是没有记忆点。面试官一天看几十份作品集，眼睛早就疲劳了。你要做的不是把页面塞满，而是在细节上轻轻推一把，让他的视线在你的作品上多停两秒。
阴影就是那把推手。卡片底下加一点点，它就从平面里浮起来了；按钮旁边加一点点，手指还没点，心里已经觉得它能按；头像加一点点，整个人的轮廓都精神了。阴影不抢内容，却在悄悄告诉面试官：这人对细节有感觉。
box-shadow 的参数含义
手写 box-shadow 折磨人，是因为它一次要处理五个值：
- x 偏移：阴影水平方向的位置，正数向右
- y 偏移：阴影垂直方向的位置，正数向下
- 模糊半径：数值越大边缘越虚，越小边缘越硬
- 扩散半径：正数让阴影整体放大，负数让阴影收缩，边缘更利落
- 颜色与透明度：决定阴影的轻重和冷暖
改其中任何一个数值，整张卡的感觉都会变。这也是为什么手动试参数效率极低，来回试二十多遍是常事。
用生成器的操作步骤
- 打开 CSS 阴影生成器工具，界面通常是左侧参数区、右侧实时预览区。
- 先选阴影类型：普通外投影、内阴影，还是多层叠加。
- 想做出高级的悬浮感，叠两到三层。一层大而淡的做环境光，一层小而深的做接触阴影。
- 调颜色：不要用纯黑，用深蓝或深灰，透明度压到 10% 到 20% 之间，出来的效果才透气。
- 调半径：模糊半径给大一点，扩散半径给小一点甚至用负数，边缘会收得更利落。
- 满意后直接复制生成的代码，粘进你的样式表。
拖滑块就能实时看效果，左边调右边预览，比手写参数快得多。
作品集里哪些位置值得加
- 首屏主卡片：加一层柔和的外阴影，让它从背景里站出来
- 项目列表缩略图：加个轻微内阴影，模拟相框的凹陷感
- 吸顶导航栏：底部来一条细阴影，告诉用户“我在这儿”
- 模态框、下拉菜单、悬浮按钮：阴影的高频使用区
有一个原则必须守住：一个页面里阴影的性格要统一。要么全是硬朗的短阴影，要么全是柔和的散阴影，别混着来。混用会让页面显得杂乱，反而削弱层次。
常见错误与判断标准
加多了显得脏，是很多人担心的问题。判断标准很简单：眯起眼睛看，如果阴影抢了内容的戏，那就是过了；如果闭眼再睁眼，页面层次分明、主次清楚，那就对了。阴影是服务内容的，不是拿来炫技的。
其他常见错误包括：用纯黑做阴影颜色导致发灰发脏；模糊半径和扩散半径同时给大，边缘糊成一片；一个页面里阴影方向不统一，有的向左有的向右，光源逻辑自相矛盾。
适用与不适用场景
阴影适合用来建立层次：卡片、按钮、弹层、导航这些需要和背景拉开距离的元素。它不适合用来做装饰性花活，也不适合在本身已经信息密度很高的区域继续叠加。深色背景下阴影效果会明显减弱，这时候要考虑改用描边或亮度差来区分层次。
常见问题
阴影颜色为什么不能用纯黑？
纯黑阴影在浅色背景上会显得生硬发脏，用深蓝或深灰并压低透明度，效果更透气自然。
模糊半径和扩散半径有什么区别？
模糊半径控制边缘的虚实过渡，扩散半径控制阴影整体的收缩与放大。想让边缘利落，模糊给大、扩散给小甚至用负数。
一个元素叠几层阴影合适？
通常两到三层。一层大而淡做环境光，一层小而深做接触阴影，再多容易变脏。
页面里所有阴影要统一吗？
要。硬朗短阴影和柔和散阴影不要混用，统一性格页面才干净。
深色背景下阴影没效果怎么办？
深色背景会削弱阴影的可见度，可以考虑改用描边或明暗差来建立层次。
花十分钟用 CSS 阴影生成器把作品集里的关键元素调一调，不费劲，但面试官滑动屏幕的时候，手指可能就停下来了。停下来，你才有机会让他看见你代码背后的东西。