如何用单个DIV实现CSS轻微折叠边框3D效果？

当然可以用单个DIV实现这种边框轻微折叠的淡3D效果！之前用两个DIV的思路其实可以通过多层box-shadow配合小技巧简化，完全不需要额外嵌套元素。

核心思路 #

通过给单个DIV设置多层方向不同的阴影，模拟出边框“折叠”的光影效果：

• 左上侧用浅色阴影模拟边框凸起的高光
• 右下侧用深色阴影模拟边框凹陷的投影
• 再叠加一层模糊阴影增强整体的柔和氛围感

实现代码 #

.folded-border-box {
  width: 150px;
  height: 300px;
  border-radius: 10px;
  /* 多层阴影组合出折叠感 */
  box-shadow: 
    /* 左侧高光阴影 */
    -2px 0 3px rgba(255,255,255,0.6),
    /* 顶部高光阴影 */
    0 -2px 3px rgba(255,255,255,0.6),
    /* 右侧凹陷阴影 */
    2px 0 3px rgba(0,0,0,0.1),
    /* 底部凹陷阴影 */
    0 2px 3px rgba(0,0,0,0.15),
    /* 外层模糊阴影增强氛围感 */
    0 3px 6px rgba(0,0,0,0.16);
  /* 可选：半透浅色边框让折叠过渡更自然 */
  border: 1px solid rgba(255,255,255,0.3);
  background-color: #fff; /* 背景色保证阴影效果正常显示 */
}

效果微调建议 #

• 如果想要更明显的折叠感，可以调整阴影的px数值和透明度
• 若背景是深色，可以把高光阴影的颜色换成稍浅的深色系，避免违和
• 边框圆角可以根据需求调整，阴影会自动跟随圆角形状

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