CSS 盒子阴影生成器

box-shadow 语法

box-shadow: <x-offset> <y-offset> <blur> <spread> <colour> [inset];

• x-offset：正值 = 向右，负值 = 向左。
• y-offset：正值 = 向下，负值 = 向上。
• blur：0 = 硬边缘，数值越大越柔和。可见范围大约向元素外延伸模糊值的 1.5 倍。
• spread：在元素之外额外扩展的尺寸。正值放大阴影，负值缩小阴影（适合营造细微的光晕）。
• colour：支持任意 CSS 颜色。rgba(0, 0, 0, 0.15) 是最常用的基础值。
• inset：将阴影翻转到元素内部的关键字。

多层阴影看起来更真实

这款生成器一次只输出一条阴影规则；要制作多层阴影，请逐层生成，再用逗号合并规则。

单层 0 0 40px 的阴影显得朦胧。两层阴影，靠近元素的小而锐利的一层，以及更远处大而柔和的一层，能够模拟真实光线散射的方式。

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.08),
  0 4px 12px rgba(0, 0, 0, 0.08);

第一行给出紧贴元素的接触阴影，第二行给出更柔和的环境阴影。仅凭这一种组合，就能覆盖约 80% 的卡片式 UI。

高度（Elevation）层级系统

Material Design 使用 6 个高度（elevation）层级，每个层级对应一套不同的阴影组合。简化如下：

为每种高度角色选定一套，并保持一致使用。

彩色阴影看起来更自然

纯黑阴影显得生硬，因为真实阴影会被下方表面染上色调。不妨试试：

box-shadow: 0 12px 24px rgba(40, 80, 120, 0.18);

用偏冷的蓝灰色代替纯黑。在暖色背景上，则改用更暖的色调。

性能

盒子阴影会在每次重绘时被绘制。在大量元素上使用又大又重的阴影，可能会拖慢滚动。缓解办法：

• 在元素上使用 transform: translateZ(0)，强制生成合成层。
• 仅当需要阴影跟随 clip-path 时，才用 filter: drop-shadow() 替换复杂阴影（通常它更慢）。
• 限制频繁重新渲染的元素上的阴影。

用于按下状态的 inset

.button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12);
}

inset 阴影能模拟凹陷的外观，按钮看起来像被压进了表面。配合一个小幅向下的 transform: translateY(1px)，可以带来真实的触感点击反馈。