CSS：为裁剪/遮罩状态的Div实现反向阴影效果

这个问题的核心在于clip-path的特性——它会裁剪元素的所有视觉内容（包括box-shadow），所以你直接给裁剪状态的.card加阴影是看不到的。要实现「裁剪状态显示阴影，hover完整显示时隐藏阴影」的效果，我们需要把阴影和被裁剪的元素分开处理，这里给你两种可行的方案：

方案一：使用外层容器承载阴影 #

这是最直观的方法，用一个外层容器专门负责显示/隐藏阴影，内层元素负责裁剪和hover时的尺寸恢复：

HTML 代码 #

<div class="card-wrapper">
  <div class="card"></div>
</div>

CSS 代码 #

body { margin: 30px; }

/* 外层容器：默认显示阴影，对应内层裁剪状态 */
.card-wrapper {
  box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.3);
  /* 尺寸和内层裁剪后的可视区域一致：300-20*2=260px，100-20*2=60px */
  width: 260px;
  height: 60px;
  transition: box-shadow 0.3s ease;
}

/* 内层卡片：默认裁剪状态 */
.card {
  width: 300px;
  height: 100px;
  background: mediumslateblue;
  clip-path: inset(20px 20px 20px 20px);
  /* 负margin让裁剪后的可视区域正好对齐外层容器 */
  margin: -20px;
  transition: clip-path 0.3s ease;
}

/* hover时：内层恢复完整尺寸，外层隐藏阴影 */
.card-wrapper:hover .card {
  clip-path: none;
}
.card-wrapper:hover {
  box-shadow: none;
}

原理说明 #

• 外层容器默认显示阴影，尺寸和内层裁剪后的可视区域完全匹配；
• 内层卡片通过负margin让裁剪后的部分正好对齐外层容器，视觉上是一个整体；
• hover时，内层去掉clip-path恢复完整大小，同时外层移除阴影，完美实现你要的反向效果。

方案二：使用伪元素模拟裁剪（无需额外容器） #

如果不想增加DOM节点，可以用伪元素模拟裁剪区域，把阴影放在伪元素上：

HTML 代码 #

<div class="card"></div>

CSS 代码 #

body { margin: 30px; }

.card {
  width: 300px;
  height: 100px;
  background: mediumslateblue;
  position: relative;
  transition: all 0.3s ease;
}

/* 伪元素模拟裁剪+阴影：默认显示 */
.card::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.3);
  z-index: -1;
  transition: opacity 0.3s ease;
}

/* hover时：隐藏伪元素阴影，卡片恢复视觉完整 */
.card:hover::before {
  opacity: 0;
}
.card:hover {
  outline: 20px solid transparent; /* 模拟原裁剪的占位，避免hover时页面布局跳动 */
}

原理说明 #

• 伪元素在卡片内部生成一个和原裁剪区域一致的阴影层，z-index设为-1避免遮挡卡片；
• hover时隐藏伪元素阴影，同时给卡片加透明outline占位，避免因为“裁剪移除”导致的布局跳动。

两种方案都能实现你想要的效果，方案一更稳定易维护，方案二适合不想增加DOM的场景。

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