如何在div顶部创建圆形镂空效果并为该div添加阴影？

直接用CSS mask 属性配合 box-shadow 就能搞定，以下是可直接运行的代码：

HTML结构 #

<div class="hollow-box">
  <!-- 这里放置你的内容 -->
  <p>示例内容区域</p>
</div>

CSS样式 #

/* 页面背景色，用来凸显镂空效果 */
body {
  background-color: #e5e7eb;
}

.hollow-box {
  width: 320px;
  height: 240px;
  margin: 60px auto;
  background: #fff;
  /* 添加卡片阴影 */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  /* 创建顶部中心的圆形镂空遮罩 */
  mask: radial-gradient(circle 35px at top center, transparent 100%, #000 100%);
  /* 兼容webkit内核浏览器 */
  -webkit-mask: radial-gradient(circle 35px at top center, transparent 100%, #000 100%);
}

关键说明 #

• 调整 circle 35px 中的数值可以修改镂空圆形的大小，at top center 用来控制镂空的位置；
• mask 属性仅隐藏元素的背景和内容区域，不会影响阴影的显示，完美匹配需求；
• 若需兼容老旧浏览器，可改用伪元素叠加的方案，但现代浏览器使用 mask 实现更简洁高效。

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