illegalCreed

中文

English

中文

English

Appearance

box-shadow 与阴影设计 ​

基于 CSS 现代标准 · 核于 2026-06

速查 ​

  • 语法：box-shadow: <x偏移> <y偏移> <模糊>? <扩展>? <颜色>? <inset>?，颜色 / inset 位置自由
  • 两值 = x y；三值加 模糊；四值加 扩展；模糊不可负、扩展可负（收缩阴影）
  • 颜色省略则取元素 color；alpha 阴影更自然：box-shadow: 0 4px 12px rgb(0 0 0 / 15%)
  • inset：转为内阴影（裁到 padding-box，画在背景之上、内容之下），做「按下 / 凹陷」感
  • 多层逗号叠：box-shadow: a, b, c，先写的在上层；分层阴影（近实 + 远柔）质感最佳
  • 纯描边技巧：box-shadow: 0 0 0 2px white（零偏移零模糊 = 实心环，且不占布局）
  • 不影响布局：阴影不参与盒模型、不引发回流；需留位用 margin
  • 跟随圆角：自动套用 border-radius 的圆角；与 filter: drop-shadow() 区别见下
  • 性能：大模糊 + inset 较贵，多层阴影成本累加；动画中 inset 与非 inset 混列不可插值

五个值是什么 ​

css
box-shadow: 10px 5px 5px 1px rgb(0 0 0 / 20%);
/*          ↑x  ↑y  ↑模糊 ↑扩展 ↑颜色 */

按出现顺序：

位置含义说明
offset-x水平偏移正右负左
offset-y垂直偏移正下负上；x/y 都为 0 则阴影正在元素正后方
blur-radius模糊半径越大越虚越淡；不可为负；默认 0（硬边）
spread-radius扩展半径正值放大阴影、负值收缩；默认 0
<color>颜色可省（取元素 color）；位置自由

最少两个值（x y）即可，模糊 / 扩展 / 颜色按需补。颜色和 inset 关键字写在哪个位置都行。

css
box-shadow: red 60px -16px; /* 颜色 + x + y */
box-shadow: 10px 5px 5px black; /* x + y + 模糊 + 颜色 */
box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%); /* 全四值 + 颜色 */

inset：内阴影 ​

css
box-shadow: inset 5em 1em gold; /* 内阴影 */
box-shadow: inset 0 2px 4px rgb(0 0 0 / 25%); /* 顶部内凹感 */

加 inset 后阴影画在元素内部：裁切到 padding-box，绘制在背景之上、内容之下，营造「内容被压进盒子」的凹陷观感。常用于输入框聚焦、按钮按下、内嵌凹槽。

多层阴影与绘制顺序 ​

逗号分隔可叠任意多道，先写的画在上层（盖住后写的）：

css
box-shadow:
  3px 3px red, /* 上层 */
  -1em 0 0.4em olive; /* 下层 */

分层阴影：质感的关键 ​

真实世界的影子不是一团死黑。单道阴影常显得「假、廉价」；叠加一道近距离的实影 + 一道远距离的柔影（甚至更多层、逐层加大模糊、降低透明度）才接近真实光照：

css
.elevated {
  box-shadow:
    0 1px 2px rgb(0 0 0 / 8%),
    0 4px 8px rgb(0 0 0 / 8%),
    0 8px 24px rgb(0 0 0 / 10%);
}

层数越多、模糊越大、透明度越低 → 元素「浮」得越高。这是 Material / 现代设计系统里 elevation 阴影的通用做法。

零偏移做实心环 ​

当 x、y、模糊都为 0、只留扩展时，阴影变成一圈均匀实心描边——可叠多道做多重描边，且不占布局空间：

css
.ring {
  box-shadow:
    0 0 0 2px white, /* 内圈白 */
    0 0 0 4px #66ccff; /* 外圈蓝 */
  margin: 8px; /* 阴影不占位，留 margin 防与邻居重叠 */
}

综合示例：三层叠加 ​

css
blockquote {
  padding: 20px;
  box-shadow:
    inset 0 -3em 3em rgb(0 200 0 / 30%), /* 内阴影：底部上扬的绿 */
    0 0 0 2px white, /* 实心白描边 */
    0.3em 0.3em 1em rgb(200 0 0 / 60%); /* 外投影：偏移的红 */
}

几个关键行为 ​

跟随圆角 ​

阴影自动套用元素的 border-radius，圆角盒子的阴影也是圆角的，无需额外设置。

不影响布局 ​

box-shadow 不参与盒模型、不改变元素尺寸、不引发回流——阴影只是「画上去」的，溢出元素的阴影不会撑大父级，但会视觉上叠到邻居身上。需要为阴影留空间时，用 margin。

与 filter: drop-shadow() 的区别 ​

box-shadowfilter: drop-shadow()
投影对象元素的矩形框（border-box）元素内容的实际形状（含透明 PNG / SVG 轮廓）
圆角跟随 border-radius跟随实际像素轮廓
适用卡片 / 按钮等规则盒子不规则图形、透明图、镂空形状

给一张带透明背景的 PNG 图标加阴影，要用 drop-shadow()（沿轮廓投影）；给规则卡片加阴影用 box-shadow。

性能与动画 ​

  • 性能：阴影整体较廉价，但大模糊半径 + inset 成本偏高，多层阴影成本叠加；动画里频繁改阴影不如改 opacity/transform 划算，悬停升起常用「预置两层阴影 + 切换」而非实时算。
  • 动画插值：box-shadow 可过渡，颜色按 <color>、偏移 / 模糊 / 扩展按 <length> 成对插值；两端层数不同时，少的一端补「透明 + 0 长度」的影。但只要一道有 inset、另一道没有，整组阴影就不可插值——会瞬变而非平滑过渡。
css
.btn {
  box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
  transition: box-shadow 0.2s;
}
.btn:hover {
  box-shadow: 0 6px 16px rgb(0 0 0 / 18%); /* 平滑「升起」 */
}

小结 ​

box-shadow 的五个值是 x y 模糊 扩展 颜色，inset 切内阴影。它不占布局、自动跟圆角；做质感的诀窍是分层叠加（近实 + 远柔），做描边可用零偏移实心环。给不规则 / 透明图形投影要换 filter: drop-shadow()。下一页讲另一类「上色」能力——能画过渡、条纹、饼图、色轮的：渐变全谱。