如何实现类似示例图的div容器偏移（offset）效果？

方案一：CSS伪元素实现（推荐） #

用容器的伪元素生成偏移底层块，无需额外HTML结构：

• 给目标容器设置position: relative，作为伪元素的定位基准
• 通过::before伪元素创建与容器等大的块，设置position: absolute，用top和left控制偏移距离（比如top: 6px; left: 6px）
• 给伪元素设置比主体更深的背景色，通过z-index: -1把它放在主体容器下方
• 主体容器设置背景、内边距、圆角和阴影，强化层次感

代码示例：

.offset-container {
  position: relative;
  background: #ffffff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.offset-container::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  width: 100%;
  height: 100%;
  background: #e0e0e0;
  border-radius: 8px;
  z-index: -1;
}

<div class="offset-container">
  这里是容器内容区域
</div>

方案二：双层嵌套Div实现 #

适合兼容老旧浏览器或需要更直观结构的场景：

• 外层div作为偏移层，设置背景色、圆角和padding（padding值等于偏移量）
• 内层div作为内容容器，设置背景色，通过负margin实现反向偏移（比如margin: -6px 0 0 -6px），同时添加内边距和阴影

代码示例：

.offset-wrapper {
  background: #e0e0e0;
  padding: 6px;
  border-radius: 8px;
  display: inline-block;
}

.offset-content {
  background: #ffffff;
  padding: 2rem;
  border-radius: 8px;
  margin: -6px 0 0 -6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

<div class="offset-wrapper">
  <div class="offset-content">
    这里是容器内容区域
  </div>
</div>

额外优化点 #

• 可根据需求调整偏移量、背景色深浅、圆角大小，适配不同设计风格
• 加入transition属性，实现hover时偏移量变化的交互效果：

.offset-container::before {
  transition: all 0.3s ease;
}
.offset-container:hover::before {
  top: 3px;
  left: 3px;
}

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