首先，为你通过复刻Dribbble UI来提升技能的做法点赞！针对你遇到的几个问题，我来一步步帮你解决：

1. 堆叠两个Card的方案是否最优？ #

答案是否。这种方式虽然能快速实现视觉效果，但存在不少弊端：

• 额外增加DOM节点，页面有大量这类卡片时会影响性能
• 维护成本高：后续修改卡片尺寸、颜色时，需要同步调整两个元素
• 响应式场景下容易出现错位、适配问题

更优的方案是用单个容器 + CSS伪元素（::before/::after） 或多层box-shadow来模拟效果，只需要维护一个DOM元素即可。

2. 如何实现底部的堆叠阴影效果？ #

假设你要的是卡片下方偏移的悬浮/堆叠阴影，可以用伪元素轻松实现：

.card {
  position: relative;
  width: 300px;
  height: 400px;
  background: #fff;
  border-radius: 8px;
  /* 基础悬浮阴影 */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.card::before {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 8px;
  width: 90%;
  height: 100%;
  background: rgba(0,0,0,0.05);
  border-radius: 8px;
  z-index: -1;
  /* 轻微模糊模拟阴影质感 */
  filter: blur(4px);
}

如果是卡片内部的底部内阴影，直接用inset关键字即可：

.card {
  box-shadow: inset 0 -10px 10px -8px rgba(0,0,0,0.1);
}

3. 如何为Box添加类3D效果的左侧阴影？ #

要实现3D感的左侧阴影，核心是模拟光线照射下的渐变阴影效果，推荐两种实用方式：

方式一：线性渐变伪元素（轻量自然） #

.box {
  position: relative;
  width: 300px;
  height: 400px;
  background: #f5f5f5;
  border-radius: 8px;
}

.box::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 12px;
  background: linear-gradient(to right, rgba(0,0,0,0.2), transparent);
  border-radius: 8px 0 0 8px;
}

方式二：3D变换+阴影（强烈立体感） #

如果想要更突出的3D效果，结合perspective和旋转变换：

.box {
  position: relative;
  width: 300px;
  height: 400px;
  background: #fff;
  border-radius: 8px;
  /* 开启3D空间并轻微向左旋转 */
  transform: perspective(1000px) rotateY(-5deg);
  /* 右侧阴影强化3D视觉 */
  box-shadow: 8px 0 16px rgba(0,0,0,0.15);
}

你可以根据Dribbble原图的风格，调整渐变透明度、伪元素尺寸或旋转角度，来精准匹配复刻效果。

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