如何同时实现inverted border radius反向圆角与box-shadow阴影效果

核心思路是用CSS mask 属性裁剪出内凹缺口，搭配filter: drop-shadow实现全局阴影，避免普通box-shadow被裁剪丢失的问题，同时单独实现内凹部分的边框和背景，完成和主体卡片的自然衔接。

完整可运行代码 #

HTML #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>反向圆角实现</title>
</head>
<body>
<div class="wrapper">
  <div class="header">
    <div class="dashed"></div>
    <div class="notch"></div>
  </div>
</div>
</body>
</html>

CSS #

body {
  height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #fff;
}

.wrapper {
  width: 100%;
  /* 全局阴影用drop-shadow，可适配裁剪后的实际元素轮廓 */
  filter: drop-shadow(0 0 2rem #0000005c);
}

.header {
  background-color: #efefef;
  width: 85%;
  aspect-ratio: 16/3;
  border-radius: 1.5rem;
  border: 1px solid #d0d0d0;
  position: relative;
  margin: 0 auto;
  /* 径向渐变裁剪出左侧内凹的圆形缺口，2rem为缺口半径可自行调整 */
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 2rem, #000 2rem);
  mask: radial-gradient(circle at 0 50%, transparent 2rem, #000 2rem);
}

.dashed {
  width: 100%;
  position: absolute;
  top: 50%;
  border-bottom: 1px dashed #000;
}

.notch {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 4rem;
  border-radius: 0 2rem 2rem 0;
  border: 1px solid #d0d0d0;
  border-left: none;
  background: #fff;
  box-sizing: border-box;
}

实现关键点说明 #

• 阴影放弃传统box-shadow改用filter: drop-shadow：drop-shadow会识别元素经过mask裁剪后的实际形状，生成贴合轮廓的阴影，不会出现阴影被裁剪缺失的问题
• 内凹形状直接通过CSS mask的径向渐变实现：无需引入外部SVG资源，适配所有现代浏览器，调整径向渐变参数即可快速修改缺口大小
• 单独定位内凹缺口的白色覆盖层，补全缺口处的边框和背景，和主体卡片的边框自然衔接

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