嘿，太懂这种用一堆linear-gradient拼效果的痛苦了——调个缺口大小得改好几个渐变的百分比，想加圆角更是直接歇菜！给你分享几个更灵活的方案，完美解决这俩痛点：

方案一：CSS Mask 实现（最推荐） #

用CSS遮罩（mask）可以轻松实现带圆角的缺口元素，而且缺口尺寸调整超简单：

/* 带左右缺口的圆角盒子 */
.notched-box {
  width: 240px;
  height: 140px;
  background: #2563eb;
  border-radius: 16px; /* 直接加圆角，完全不影响缺口 */
  /* 核心遮罩逻辑 */
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box, /* 保留内容区域 */
    linear-gradient(#000 0 0); /* 覆盖整个元素 */
  mask: 
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  /* 遮罩组合模式：排除重叠区域，形成缺口 */
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  /* 调整padding的左右值，直接控制缺口宽度！ */
  padding: 0 40px;
}

为什么这个方案好用？ #

• 缺口大小直接改padding数值就行，不用算渐变百分比
• border-radius直接生效，完全不用额外处理
• 单元素实现，不用加额外DOM
• 要做上下缺口的话，只需要把padding改成上下值即可

方案二：伪元素+背景覆盖（兼容性更友好） #

如果需要兼容老浏览器，也可以用伪元素来模拟缺口：

.notched-box {
  position: relative;
  width: 240px;
  height: 140px;
  background: #2563eb;
  border-radius: 16px;
  overflow: hidden;
}

/* 左边缺口覆盖 */
.notched-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 40px; /* 缺口宽度 */
  background: #fff; /* 和父元素所在背景一致的颜色 */
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}

/* 右边缺口覆盖 */
.notched-box::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 40px; /* 缺口宽度 */
  background: #fff;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}

这个方案的好处是兼容性更好，但需要额外处理背景色匹配的问题，不过调整缺口尺寸也是直接改伪元素的width就行，比渐变组合方便多了。

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