如何制作带有3D挤压效果的导航栏按钮？

你现在的问题是单纯用box-shadow的话，阴影是独立于元素圆角的，没法让按钮边角延伸到阴影区域。要解决这个问题，可以用伪元素模拟阴影，让伪元素的形状和主按钮完全匹配（包括圆角），这样就能实现边角和阴影连为一体的3D效果。

下面是具体的实现代码：

HTML #

<button class="nav-btn">导航按钮</button>

CSS #

body {
  background: #fff;
  padding: 2rem;
}

.nav-btn {
  position: relative;
  background: #101010;
  border-radius: 5px;
  padding: 1rem 2rem;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  /* 确保按钮在伪元素上方 */
  z-index: 1;
}

/* 用伪元素模拟3D阴影 */
.nav-btn::after {
  content: '';
  position: absolute;
  bottom: -5px;
  right: -5px;
  width: 100%;
  height: 100%;
  background: #202020;
  border-radius: 5px;
  /* 把伪元素放在按钮下方 */
  z-index: -1;
}

/* 可选：hover时的按压效果，增强3D感 */
.nav-btn:hover {
  transform: translate(3px, 3px);
}

.nav-btn:hover::after {
  transform: translate(-3px, -3px);
}

原理说明 #

• 伪元素::after和主按钮尺寸、圆角完全一致，通过定位偏移模拟阴影位置
• 利用z-index确保伪元素在按钮下方，形成“凸起”的视觉效果
• hover时通过transform让按钮和伪元素反向偏移，模拟按压的3D交互感

这样实现的阴影会和按钮圆角完全贴合，边角自然延伸到阴影区域，比单纯的box-shadow更符合你的需求。

内容的提问来源于stack exchange，提问作者Jim Cutler