卡片阴影浮层效果是界面层级表达的重要手段。一个看似简单的投影，实际上由偏移、模糊、扩散、颜色和叠加顺序共同决定。掌握这些参数之间的配合，可以避免阴影显得脏、糊或突兀。很多不够精致的卡片阴影，往往只是随手写了一个纯黑大模糊值，没有考虑光影层次和色彩倾向，导致卡片看起来像漂浮在灰雾中。下面从 box-shadow 的基础机制开始，拆解如何设计出自然的卡片浮层效果。
一、box-shadow 核心参数与多层叠加
box-shadow 属性可以为一个元素添加一个或多个投影，完整写法包含水平偏移、垂直偏移、模糊半径、扩散半径和颜色。水平偏移为正值时阴影向右移动，垂直偏移为正值时阴影向下移动；模糊半径越大阴影边缘越柔和，值为零时阴影边缘锐利；扩散半径则控制阴影从原始边界向外扩展或向内收缩的大小。书写时建议把颜色放在最后，并使用 rgba 或 hsla 形式来控制透明度。
/* 单个投影：水平偏移 垂直偏移 模糊半径 扩散半径 颜色 */
.card {
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
/* 使用负扩散半径收紧阴影 */
.card--tight {
box-shadow: 0 10px 24px -4px rgba(15, 23, 42, 0.14);
}
/* 内阴影 */
.card--inset {
box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}
多层阴影是提升卡片浮层质感的关键。多个阴影值之间用逗号分隔，先声明的阴影会绘制在更上层，后声明的阴影被压在下面。实际设计中，通常把范围较小、透明度较低的近距阴影放在前面，把范围较大、更柔和的环境阴影放在后面。这样叠加之后，卡片边缘会有一层清晰的接触阴影，同时又带有向四周扩散的空气感，比单个大模糊阴影更加真实。
.card {
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.06),
0 8px 24px rgba(15, 23, 42, 0.08);
}
需要特别说明的是，阴影颜色不应直接使用纯黑。真实世界中的投影会受到环境光影响，通常带有蓝灰或紫灰倾向。使用 rgba(15, 23, 42, 0.08) 这类颜色，既可以保证阴影有足够对比度，又不会显得发灰或发脏。透明度控制在 0.05 到 0.16 之间，可以在大多数浅色背景上获得干净的浮层效果。
二、设计卡片阴影浮层：从静态到悬浮
卡片默认态与悬浮态之间应当存在明显的海拔变化。默认态使用较弱的阴影，表示卡片位于页面基础层级；当鼠标悬停或卡片获得焦点时，通过增加偏移距离、模糊半径和透明度，让卡片看起来向上抬起。位移与阴影必须同步变化，如果只有阴影变化而卡片本身不动，浮层感会大打折扣。
.card {
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.06),
0 4px 12px rgba(15, 23, 42, 0.06);
transition: transform 200ms ease, box-shadow 200ms ease;
}
.card:hover {
transform: translateY(-6px);
box-shadow:
0 4px 8px rgba(15, 23, 42, 0.08),
0 16px 40px rgba(15, 23, 42, 0.14);
}
悬浮态的阴影可以拆成两层理解：第一层是距离卡片较近的清晰阴影，用来表达卡片与下方内容之间的微小间隙；第二层是范围更大的柔和阴影，用来模拟环境光被遮挡后的扩散。第二层阴影的模糊半径通常是偏移量的两到三倍，颜色透明度可以稍高一些，但不要超过 0.18，否则容易让阴影变得生硬或产生拖尾感。
如果希望悬浮时阴影范围不要扩散得过远，可以给第二层阴影增加负扩散半径，比如 -4px。这样阴影会在边缘处收紧，同时保留足够的模糊度。对于较窄的卡片或密集布局，负扩散半径能够避免阴影与相邻元素互相污染。另一个常用技巧是配合 border 明确卡片边界，阴影只负责表达高度，不承担边界划分的职责。
三、阴影裁剪、性能与常见误区
box-shadow 不占据文档流空间，也不会改变元素的实际尺寸，但它在视觉上会超出盒子边界。如果父容器设置了 overflow: hidden，阴影会被直接裁掉。解决这个问题的方法有两种：一是给父容器预留足够的内边距，让阴影有空间显示；二是把阴影从需要裁剪的容器中拆出来，通过独立层级或伪元素来承载。实际开发中，卡片列表常常因为父容器裁剪而失去阴影，需要特别留意布局结构。
性能方面，静态 box-shadow 对渲染性能影响较小，但如果在高频率动画中持续改变阴影值，会触发浏览器的重绘操作。对于 hover 浮起这类低频交互，阴影动画通常可以接受；若页面中大量卡片同时动画，则建议把动画主要放在 transform 上，阴影变化只在状态切换时发生。不要滥用 will-change，因为它会为元素创建独立合成层，过量使用反而会增加内存占用。
还有一些常见误区需要避免。一是把模糊半径设置得过大，却没有同步调整透明度，导致阴影又大又黑；二是用 box-shadow 替代边框做边界，结果在低分辨率屏幕上边缘出现模糊或发虚；三是在同一元素上叠加过多阴影，每层都很明显，缺乏主次关系。阴影设计的原则是：近距阴影强调边界，远距阴影表达空间，透明度负责柔和度，多个阴影之间要有清晰分工。
四、用 CSS 变量统一阴影令牌
在组件库或大型项目中，如果每个卡片都手写一份阴影值，后期调整会非常困难。更好的做法是在根选择器中定义一组阴影令牌，用 CSS 变量保存不同级别的阴影，再让组件按需引用。这样既统一了视觉语言，也便于后续统一调整透明度、颜色或模糊参数。
:root {
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.05);
--shadow-md: 0 4px 8px rgba(15, 23, 42, 0.08), 0 10px 24px rgba(15, 23, 42, 0.10);
--shadow-lg: 0 8px 16px rgba(15, 23, 42, 0.10), 0 20px 48px rgba(15, 23, 42, 0.16);
}
.card {
box-shadow: var(--shadow-md);
}
.card--raised {
box-shadow: var(--shadow-lg);
}
暗色模式是阴影设计中的一个特殊场景。深色背景下，原本低透明度的阴影几乎不可见，卡片会失去层次感。此时可以通过媒体查询覆盖阴影变量，提高阴影的透明度，甚至结合边框或更亮的背景色来区分层级。暗色模式下的阴影更像是黑色背景中叠加的深色块，而不是传统意义上的投影。
@media (prefers-color-scheme: dark) {
:root {
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.45), 0 10px 24px rgba(0, 0, 0, 0.30);
}
}
掌握 CSS box-shadow 并不是记住几组固定数值，而是理解偏移、模糊、扩散、透明度和叠加顺序如何共同影响阴影形态。通过多层阴影模拟真实光源，借助 CSS 变量统一维护阴影层级，并在 hover 状态中协调 transform 与阴影变化，就能实现自然、干净、可维护的卡片阴影浮层效果。实际项目中再注意父容器裁剪和暗色模式适配，阴影设计就能从可用提升到精致的层次。
CSS box-shadow卡片阴影浮层效果修改时间：2026-08-22 09:58:06