通过多层叠加的 box-shadow 模拟深度与光照，无需图片或 javascript，即可为按钮创建具有真实立体感的 extrusion（挤出）效果，使边缘自然延伸至阴影区域，强化视觉纵深。
通过多层叠加的 box-shadow 模拟深度与光照，无需图片或 javascript，即可为按钮创建具有真实立体感的 extrusion（挤出）效果，使边缘自然延伸至阴影区域，强化视觉纵深。
要实现专业级的 3D 挤出按钮效果，关键在于分层控制阴影的偏移、模糊与颜色渐变，而非仅依赖单层 box-shadow。原方案中仅使用一层带模糊的阴影，导致边缘“漂浮”，缺乏物理厚度感；而真正的 3D extrusion 应呈现类似雕刻文字或金属压印的硬边堆叠效果——即阴影由近及远逐层加深、加宽，且最外层保留锐利轮廓。
以下是一个优化后的 CSS 实现（支持现代浏览器，含 CSS 自定义属性便于维护）：
.button-3d {
/* 基础样式 */
background: #101010;
color: #fff;
padding: 1rem 2rem;
border-radius: 6px;
border: none;
font-weight: 600;
cursor: pointer;
outline: none;
transition: transform 0.1s ease, box-shadow 0.15s ease;
/* 核心：多层无模糊 shadow 模拟硬质挤出 */
--shadow-dark: #383838;
--shadow-deep: #000;
box-shadow:
2px 2px 0 var(--shadow-dark),
4px 4px 0 var(--shadow-dark),
6px 6px 0 var(--shadow-dark),
8px 8px 0 var(--shadow-dark),
10px 10px 0 var(--shadow-deep),
12px 12px 0 var(--shadow-deep);
/* 可选：添加悬停下压反馈，增强交互真实感 */
}
.button-3d:hover {
transform: translate(2px, 2px);
box-shadow:
1px 1px 0 var(--shadow-dark),
2px 2px 0 var(--shadow-dark),
3px 3px 0 var(--shadow-dark),
4px 4px 0 var(--shadow-dark),
5px 5px 0 var(--shadow-deep),
6px 6px 0 var(--shadow-deep);
}
.button-3d:active {
transform: translate(4px, 4px);
}
对应 HTML：
<button class="button-3d">Click Me</button>
✅ 关键要点说明：
- 无模糊值（0）是核心：每层 box-shadow 的第三个参数设为 0，确保阴影边缘锐利，形成清晰的“台阶式”堆叠，模拟实体挤压的硬边过渡；
- 颜色由浅入深：内层用中灰（#383838），外层用纯黑（#000），模拟光线衰减与投影加深；
- 像素级递增偏移：2px → 4px → ... → 12px 的等差序列，构建稳定视觉深度节奏；
- 交互增强：配合 transform 位移与阴影微调，实现按下时的“沉降”动效，大幅提升可用性感知。
⚠️ 注意事项：
- 避免在 .button-3d 上设置 overflow: hidden，否则会裁剪掉延伸的阴影；
- 若需适配深色背景，应同步调整 --shadow-dark 和 --shadow-deep 的明度，保持对比度；
- 移动端建议增加 touch-action: manipulation 提升点击响应灵敏度。
这种纯 CSS 方案轻量、可访问、易复用，完美契合导航栏等高频交互场景——既满足设计对立体质感的追求，又坚守前端性能与语义化原则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
