如何在矩形Div中制作多圆形镂空并保留内部圆形Div显示

一、避免内部圆形Div被遮罩的问题 #

你之前直接给主矩形Div加mask-image，会让整个元素（包括子元素）被统一遮罩，导致内部圆形Div被隐藏。可以用伪元素+层级控制解决，只对主矩形背景做镂空，不影响子元素：

/* 主矩形基础样式 */
.main-rect {
  position: relative;
  /* 保留你原有的背景、尺寸等样式 */
  background: #your-bg-color;
  width: xxxpx;
  height: xxxpx;
}

/* 用伪元素实现镂空，覆盖在主矩形上方 */
.main-rect::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit; /* 继承主矩形背景色 */
  /* 镂空mask效果 */
  -webkit-mask-image: radial-gradient(
    circle at 75% top,
    transparent 30px,
    black 31px
  );
  mask-image: radial-gradient(
    circle at 75% top,
    transparent 30px,
    black 31px
  );
  z-index: 1; /* 伪元素在主矩形内容层上方 */
}

/* 内部圆形Div样式，通过层级显示在伪元素之上 */
.circle-div {
  position: relative;
  z-index: 2;
  /* 保留你原有的圆形样式 */
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #your-circle-color;
  margin-top: -30px; /* 你的负margin定位 */
}

这样镂空效果只作用在伪元素上，只会遮挡主矩形背景，内部圆形Div因为层级更高，完全不受影响。

二、在同一个Div上实现多次镂空（复用类） #

CSS中重复应用同一个类不会叠加样式，要实现多个镂空，有两种实用方式：

方式1：单个mask-image叠加多个渐变 #

直接在mask-image里用逗号分隔多个radial-gradient，每个渐变对应一个镂空区域：

.circle-cut-multi {
  -webkit-mask-image: 
    /* 右上角镂空 */
    radial-gradient(circle at 75% top, transparent 30px, black 31px),
    /* 左下角镂空 */
    radial-gradient(circle at 25% bottom, transparent 25px, black 26px),
    /* 可继续添加更多镂空 */
    radial-gradient(circle at 50% 50%, transparent 20px, black 21px);
  mask-image: 
    radial-gradient(circle at 75% top, transparent 30px, black 31px),
    radial-gradient(circle at 25% bottom, transparent 25px, black 26px),
    radial-gradient(circle at 50% 50%, transparent 20px, black 21px);
}

使用时直接给Div加这个类：

<div class="main-rect circle-cut-multi"></div>

方式2：用自定义属性创建通用镂空类 #

通过CSS变量传递镂空的位置和尺寸，创建一个可复用的通用类，按需修改变量即可：

/* 通用镂空类 */
.circle-cut {
  -webkit-mask-image: 
    radial-gradient(circle at var(--pos1), transparent var(--r1), black calc(var(--r1)+1px)),
    radial-gradient(circle at var(--pos2), transparent var(--r2), black calc(var(--r2)+1px));
  mask-image: 
    radial-gradient(circle at var(--pos1), transparent var(--r1), black calc(var(--r1)+1px)),
    radial-gradient(circle at var(--pos2), transparent var(--r2), black calc(var(--r2)+1px));
}

使用时在元素上定义变量：

<div class="main-rect circle-cut" 
     style="--pos1:75% top; --r1:30px; --pos2:25% bottom; --r2:25px">
</div>

这种方式灵活性高，能快速调整每个镂空的位置和大小。

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