本文详解如何通过多层 box-shadow 叠加模拟立体挤压感，让按钮呈现自然的深度与光影过渡，无需图片或 javascript，兼容性强且易于定制。
本文详解如何通过多层 box-shadow 叠加模拟立体挤压感，让按钮呈现自然的深度与光影过渡，无需图片或 javascript，兼容性强且易于定制。
要实现真正具有「3D 挤压」（extrusion）质感的按钮——即边缘仿佛从背景中向前凸出、阴影随深度逐层变暗变模糊——关键在于分层控制投影的偏移量、模糊半径与颜色，而非仅依赖单层阴影。
下面是一个经过优化的纯 CSS 方案，使用 CSS 自定义属性提升可维护性，并确保阴影严格贴合元素轮廓（包括圆角）：
.button-3d {
/* 基础样式 */
background: #101010;
color: #fff;
padding: 1rem 2rem;
border-radius: 6px;
border: none;
font-size: 1.1rem;
font-weight: 500;
cursor: pointer;
outline: none;
transition: transform 0.1s ease, box-shadow 0.15s ease;
/* 核心：多层 box-shadow 构建 3D 挤压 */
--shadow-base: #383838;
--shadow-deep: #000;
box-shadow:
2px 2px 0 0 var(--shadow-base),
4px 4px 0 0 var(--shadow-base),
6px 6px 0 0 var(--shadow-base),
8px 8px 0 0 var(--shadow-base),
10px 10px 8px 0 var(--shadow-deep),
12px 12px 12px -2px var(--shadow-deep);
}
/* 按下反馈：轻微内陷感 */
.button-3d:active {
transform: translate(4px, 4px);
box-shadow:
0 0 0 0 var(--shadow-base),
2px 2px 0 0 var(--shadow-base),
4px 4px 0 0 var(--shadow-base),
6px 6px 0 0 var(--shadow-base),
8px 8px 8px 0 var(--shadow-deep);
}
HTML 使用示例：
<button class="button-3d">Click Me</button>
✅ 为什么这样更有效？
- 前四层 box-shadow 使用 0 模糊半径（0 0），形成清晰、硬边的「阶梯式位移」，模拟光线在斜面边缘产生的锐利投影；
- 后两层引入小幅度模糊（8px / 12px）与负扩展（-2px），增强纵深感与真实阴影衰减；
- 圆角（border-radius）会自动被所有 box-shadow 遵循，因此阴影自然包裹圆角边缘，完美解决“角落延伸”需求；
- :active 状态通过反向位移 + 重置阴影，营造按压内陷错觉，大幅提升交互沉浸感。
⚠️ 注意事项：
- 避免过度叠加阴影（如超过 8 层），可能影响渲染性能，尤其在低端移动设备；
- 若需适配深色背景，请同步调整 --shadow-base 和 --shadow-deep 为更浅灰阶（如 #aaa / #777），保持对比度；
- 不建议对 box-shadow 使用 inset 模拟内凹——它无法复现真实挤压的外延阴影结构。
这种技法本质是用视觉层次替代几何建模，在 CSS 能力边界内以极简代码达成高表现力效果，是现代 UI 开发中轻量级 3D 化的经典实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
