如何为容器底部制作3D阴影，使其呈现如参考图所示的立体质感

API 探路者

2026-8-11

实现逼真3D立体质感容器阴影效果

核心实现思路

通过CSS多层box-shadow叠加模拟光影层次，配合轻微的透视旋转变换，让容器呈现出“立在平面上”的视觉效果，还原真实的立体阴影质感。

完整代码示例

HTML结构

<div class="3d-container">
  这是一个带3D立体质感的容器
</div>

CSS样式

.3d-container {
  position: relative;
  width: 320px;
  padding: 2.5rem;
  margin: 4rem auto;
  background: #fff;
  border-radius: 10px;
  /* 多层阴影构建立体光影 */
  box-shadow: 
    0 8px 12px -4px rgba(0, 0, 0, 0.08),
    0 22px 28px -8px rgba(0, 0, 0, 0.12),
    12px 12px 24px rgba(0, 0, 0, 0.1);
  /* 透视旋转强化立体质感 */
  transform: perspective(1200px) rotateX(3deg) rotateY(-3deg);
}

/* 伪元素补充底部渐变阴影，增强真实感 */
.3d-container::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 8%;
  width: 84%;
  height: 18px;
  background: linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0) 100%);
  border-radius: 50%;
  filter: blur(12px);
  z-index: -1;
}