如何在Div元素上添加透明圆形镂空效果？

• 镂空实现逻辑冲突：常规的镂空实现多为背景挖洞、蒙版、伪元素覆盖三种方案，如果先插入内容，子元素自带的不透明背景（比如你现有代码里h5设置的background: #ffffff）会直接覆盖镂空的透明区域，导致镂空失效；如果先做镂空再加内容，大概率是你把镂空用的伪元素/蒙版层级设得比内容高，直接盖住了内部插入的内容。
• z-index配置错误：你现有代码里residential-card-top设置了z-index: -5，会让顶部背景图区块层级低于父级容器，就算底部区块挖了镂空，也透不出顶部的背景图，看起来就像镂空没有生效。
• 元素层级关系错误：底部卡片residential-card-bottom是绝对定位叠在顶部区块上方，如果你做镂空时没有保证底部卡片自身的背景是唯一需要挖洞的层，额外添加的蒙版/伪元素很容易干扰内部内容的正常展示。

你可以直接给底部白色区块的背景用径向渐变挖掉头像位置的透明圆，不需要额外添加元素，也不会影响内部内容展示：

1. 先修正现有代码的无效属性：
   • 删掉residential-card-top的z-index: -5、仅适用于图片元素的object-fit: cover、无效属性background-position: cover
   • 删掉residential-card-bottom下h5的background: #ffffff，避免不必要的背景遮挡镂空区域
2. 替换residential-card-bottom的背景属性，用径向渐变实现挖洞：

.kashif-content>.kashif-content-cards>.kashif-content-cards-footer .residential-card>.residential-card-bottom {
  /* 原有宽度、定位、内边距等属性全部保留，仅修改background属性即可 */
  background: radial-gradient(circle at 32px 0, transparent 34px, #ffffff 0);
}

参数说明：circle at 32px 0表示圆心在底部区块左上角水平32px、垂直0px的位置，刚好对应你头像的中心点横坐标；transparent 34px表示半径34px范围内都是透明，比64px宽的头像半径多2px，刚好适配你头像的透明边框，超出范围统一填充白色。

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