如何实现div边框一侧镂空效果，透出父容器或body的背景色

方案1：CSS mask属性实现（推荐，代码简洁易维护） #

核心原理是给卡片添加遮罩，排除右下角需要镂空的区域，让该区域变为透明直接透出下层容器的背景，卡片移动时镂空区域同步位移，透出的背景内容会自动对应变化。

HTML结构 #

<div class="container">
  <div class="card">
    <!-- 卡片内其他内容 -->
  </div>
</div>

CSS样式 #

.container {
  width: 100vw;
  height: 100vh;
  /* 替换为你的容器背景图/背景色 */
  background: url(你的背景图本地地址/项目内路径) center / cover no-repeat;
  position: relative;
}

.card {
  width: 300px;
  height: 400px;
  background: #fff; /* 卡片的背景色 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease; /* 移动过渡效果 */
  border-radius: 12px;

  /* 镂空核心代码：右下角挖一个60px*60px的洞，可自行调整尺寸和位置 */
  -webkit-mask: 
    linear-gradient(#000 0 0) 0 0/100% 100% no-repeat,
    linear-gradient(#000 0 0) bottom 20px right 20px / 60px 60px no-repeat;
  -webkit-mask-composite: xor;
  mask: 
    linear-gradient(#000 0 0) 0 0/100% 100% no-repeat,
    linear-gradient(#000 0 0) bottom 20px right 20px / 60px 60px no-repeat;
  mask-composite: exclude;
}

/* 测试卡片移动效果，hover时卡片向右偏移100px */
.card:hover {
  transform: translate(calc(-50% + 100px), -50%);
}

方案2：伪元素+box-shadow兼容方案（适配不支持mask属性的老旧浏览器） #

核心原理是将卡片背景设为透明，用伪元素的扩展阴影填充卡片除镂空区域外的所有空间，实现镂空效果。

CSS样式（HTML结构同方案1） #

.container {
  width: 100vw;
  height: 100vh;
  /* 替换为你的容器背景图/背景色 */
  background: url(你的背景图本地地址/项目内路径) center / cover no-repeat;
  position: relative;
}

.card {
  width: 300px;
  height: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
  border-radius: 12px;
  overflow: hidden;
  background: transparent; /* 卡片背景设为透明 */
}

.card::after {
  content: '';
  position: absolute;
  /* 调整镂空区域位置和尺寸 */
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  /* 用阴影填充卡片其他区域，颜色为卡片原本的背景色 */
  box-shadow: 0 0 0 9999px #fff;
  /* 如果需要镂空区域是圆角可以加border-radius */
  border-radius: 8px;
}

/* 测试卡片移动效果 */
.card:hover {
  transform: translate(calc(-50% + 100px), -50%);
}

注意：使用方案2时，卡片内部的内容需要添加position: relative; z-index: 1;样式，避免内容被伪元素的阴影层遮挡。

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