正在加载...
CSS 盒阴影
响应式告诉你 layout 何时改变。盒阴影打开 Effects & Motion：卡片下的柔和深度、输入框内的下沉感，或按钮上安静的抬升 — 全靠一个属性 box-shadow，不会改动 box model 的尺寸。
阴影的组成部分
📊 一眼看清 box-shadow 各部分
| 部分 | 日常用途 |
|---|---|
offset-x / offset-y |
阴影相对盒子的位置（正值 = 右 / 下） |
blur-radius |
边缘柔和度 — 0 是硬边；越大边缘越羽化 |
spread-radius |
可选；在模糊前放大或缩小阴影外形 |
color |
常用 rgba(...)，让阴影保持半透明 |
inset |
可选关键字 — 把阴影画在盒子内侧 |
| 多层列表 | 用逗号分隔的阴影会叠在一起（远处柔和 + 近处更利落） |
想的是抬升，不是装饰狂轰滥炸。卡片下一层柔和阴影，往往胜过三条刺眼描边。
柔和的外阴影抬升
常见卡片配方：略向下偏移、中等模糊、几乎不用 spread，再配半透明黑（或灰）。阴影应暗示上方来光 — 而不是粘在盒子背后的黑矩形。
.card {
background: #fff;
border-radius: 0.75rem;
padding: 1.25rem;
box-shadow: 0 0.5rem 1.25rem rgba(15, 23, 42, 0.12);
}
正的 offset-y 把阴影落在盒子下方。把 alpha 压低，文字和相邻内容才仍然清晰。
inset — 盒子内侧的深度
加上 inset 关键字，阴影向内绘制。适合凹槽、按下态按钮，或希望略显凹陷的输入框。
.field {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
padding: 0.75rem 1rem;
box-shadow: inset 0 0.125rem 0.35rem rgba(15, 23, 42, 0.08);
}
inset 不能替代 border 或 padding — 它只改变着色区域内光如何落入的观感。
分层阴影
用逗号列出多层阴影。远处一层柔和、近处一层更紧，往往读起来像自然抬升，而不是沉重描边。
.panel {
background: #fff;
border-radius: 1rem;
box-shadow:
0 0.125rem 0.25rem rgba(15, 23, 42, 0.06),
0 0.75rem 1.5rem rgba(15, 23, 42, 0.1);
}
列表顺序即绘制顺序；两层仍同属一个元素。两层安静的阴影，好过一团不透明的糊。
重置、强调色，以及只作用于盒子
需要重新贴平时设 box-shadow: none。带色调的阴影可以托品牌强调色 — 模糊仍要柔、alpha 仍要克制。记住：字形用 text-shadow（文本效果）；盒子用 box-shadow。
.chip {
box-shadow: none;
}
.chip.is-accent {
box-shadow: 0 0.35rem 0.9rem rgba(37, 99, 235, 0.28);
}
自己动手
- 给白卡片一层柔和外阴影（x 偏移为
0，y 略向下，模糊约 1rem，低 alpha）。 - 给搜索框加
inset阴影，让它略显凹陷。 - 把一块面板升级为双层叠（近 + 远）。
- 在练习文件里找到实心黑的
box-shadow，用rgba软化。 - 确认标题光晕用的是
text-shadow，不是box-shadow。
常见错误
- 完全不透明的黑影，看起来像复制出第二个盒子
- 把 blur 和 spread 当成同一个旋钮
- 本该用
text-shadow，却给文字套了box-shadow - 给每个列表项、链接和图标都加阴影，直到整页发雾
- 设计需要按下或镂空感时，忘了用
inset
小结
box-shadow：offset、blur、可选 spread、颜色，以及可选inset- 柔和半透明的外阴影营造平静抬升
- 用逗号叠层；用
none贴回平面 - 盒子 ≠ 字形 —
text-shadow留给文字 - Effects & Motion 下一题：Transitions
🧠 测试您的知识
准备开始
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
7
问题
70%
及格要求
∞
时间
∞
尝试次数
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部