你给卡片加上 box-shadow: 0 2px 4px rgba(0,0,0,0.2)，看起来……还行，但总不像真实设计稿里的阴影。或者你为了”柔和”把模糊值调大，结果整张卡片糊成一团灰。问题几乎从来不在审美，而在于 box-shadow 其实是五个各司其职的数字，大多数人把它们当成一坨。本文把声明拆成零件，再给你设计师真正在用的两层阴影套路。
五个参数
一条阴影声明里有五个值：
box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, 0.2);
/* | | | | |
/* | | | | +-- 颜色
/* | | | +------- 扩展半径（放大/缩小阴影盒）
/* | | +----------- 模糊半径（边缘的柔和度）
/* | +--------------- Y 偏移（向下）
/* +-------------------- X 偏移（向右）
除了颜色，每个值都可省略——浏览器会补默认值：两个偏移都是 0，模糊 0（硬边阴影），扩展 0。两个常见误解拆开后立刻消解：没有模糊的阴影就是在元素后面画一个实心矩形；而 box-shadow 与元素的边框完全无关——它是在同一平面上投影出的另一个盒子。
偏移：方向是个决定
offset-x 让阴影向右（正）或向左（负）移动，offset-y 向下或向上。两点值得内化：
光源方向要一致。 如果所有卡片的阴影都是 0 2px 4px（光从上方来），整页保持一致。混用偏移方向是让 UI 看起来散架的最快方式。
偏移不是厚度。 有人把偏移调大以为能做出”更重的阴影”，其实只是把阴影推远了——离元素越远的阴影读作悬浮，而不是垫高。
紧贴元素下方的阴影（0 1px 2px）传达”我贴在表面上”；垂直偏移更大的阴影（0 20px 40px）传达”我飘在离表面很高的地方”。
模糊与扩展：两个半径
模糊控制边缘有多柔和。零模糊 = 一个利落的硬边矩形（适合做类似边框的效果，不适合做写实阴影）。模糊值越大，边缘变成渐变，阴影向所有方向大约延伸半个模糊值——所以 0 2px 4px 会向下柔和、并微微外扩。
扩展在模糊之前放大（正）或缩小（负）阴影盒子本身：
box-shadow: 0 0 0 1px rgba(0,0,0,0.1); /* 1px 实心环——这是边框，不是阴影 */
box-shadow: 0 0 0 3px #3b82f6; /* 焦点环 */
box-shadow: 0 4px 12px -4px rgba(0,0,0,0.3); /* 负扩展让阴影紧贴边缘 */
负扩展的技巧到处都是：-4px 把阴影盒往里收，这样即使模糊值中等，可见的阴影也会贴着元素四角，避免”灰色矩形从边缘探出头”的观感。
Inset：向内走的阴影
inset 把阴影翻转到元素内部：
box-shadow: inset 0 1px 3px rgba(0,0,0,0.2); /* 按下/凹陷 */
box-shadow: inset 0 -1px 0 rgba(255,255,255,0.4); /* 顶部内高光 */
按钮”被按下”、输入框”是凹的”、开关”处于开启”，靠的都是内阴影。同样的五个参数，只是向内镜像。常见组合是凹陷区顶部一条深色内阴影、底部一条浅色内阴影——这一上一下就是凹槽看起来真实的关键。
多层阴影：两层卡片阴影
用逗号可以叠加任意多层阴影——排在最前面的画在最上层：
box-shadow:
0 1px 2px rgba(0,0,0,0.06), /* 紧贴的接触阴影 */
0 8px 24px rgba(0,0,0,0.10); /* 大而软的漫射阴影 */
这个两层套路是本文最有价值的一招。真实的阴影同时是两种东西：一条紧贴边缘的接触阴影（小、紧，标出元素的确切底座）和一条来自房间的漫射阴影（大、软，标出它飘得多高）。只给一层中等阴影两头都够不着——看起来就是一团糊。照着上面的模式，并按元素尺寸缩放数字：小按钮要更小的层，大卡片要把漫射层推得更远、透明度更低。
text-shadow 与 drop-shadow
text-shadow 参数与 box-shadow 相同，只是没有扩展：text-shadow: 偏移X 偏移Y 模糊 颜色。它跟随的是字形框，所以给文字加很大的模糊，看起来像每个字母框周围套了圈光晕，而不是贴合字形。
想让阴影贴合真实的渲染像素——带下伸部的字母、透明 PNG、SVG 图标——该用 filter：
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
drop-shadow 沿着图片的 alpha 通道描边，所以它是图标和镂空图形的正确工具；而如果只是给普通文字加阴影，用它反而又糊又费。
为什么阴影难看：四条法则
绝大多数”难看”的阴影都能归结为四个可修正的决定：
颜色，不只是透明度。 在彩色背景上用 rgba(0,0,0,0.5) 会像淤青。用低透明度黑（卡片用 0.1–0.2），或干脆用背景色同色系的暗调。
两层，不是一层。 一层中等模糊 = 糊。紧的接触层 + 大的漫射层 = 有纵深感。见上面的多层章节。
模糊不要乱烧。 很多大元素上超大模糊半径是实打实的绘制开销，滚动时尤其明显。让漫射层克制一点，让接触层干活。
想要柔和，模糊要大于偏移。 0 1px 1px 基本是发丝线，0 8px 8px 才是软的。当”阴影”看起来像边框时，通常是模糊 ≈ 偏移。
快速参考
box-shadow: 偏移X 偏移Y 模糊 扩展 颜色——五个独立旋钮，只有颜色必填。
偏移移动阴影；整页保持光源方向一致。
模糊柔化边缘；扩展在模糊前放大/缩小阴影盒。
负扩展把阴影往里收——“贴合”阴影的秘诀。
inset 画内阴影：按下的按钮、凹陷的输入框、0 0 0 Npx 焦点环。
两层阴影（紧接触 + 大漫射）才能做出真实的卡片纵深感。
text-shadow 没有扩展；图标和镂空图形用 filter: drop-shadow() 贴合像素。
阴影看着像边框，通常模糊 ≈ 偏移；看着发糊，通常是层太少或透明度太高。
想设计阴影又不想手数那五个数字，CSS Box Shadow Generator 让你拖拽偏移、模糊、扩展和颜色并实时预览，直接复制 CSS；Text Shadow Generator 对排版做同样的事。阴影属于和 flexbox、grid 同一套布局工具箱——盒子放对了位置之后，阴影是让它”感觉真实”的那一步。