如何在Vue.js的Card组件上添加notch缺口效果

这个效果完全可以用纯CSS实现，不需要额外引入第三方依赖，对你已经写完的基础Card组件改动极小。

方案1：CSS mask 实现（优先推荐） #

这是适配性最好的方案，完美兼容你现有的圆角、边框、阴影、渐变背景效果，不会出现拼接断层、锯齿问题。
直接在你现有Card的样式上追加遮罩配置即可，以下是可直接复用的Vue单文件组件示例：

<template>
  <div class="base-card notch-card">
    <slot />
  </div>
</template>

<style scoped>
.base-card {
  /* 保留你已经写好的Card基础样式即可，比如圆角、背景、内边距、阴影 */
  width: 340px;
  min-height: 200px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  padding: 24px;
  position: relative;
}

.notch-card {
  /* 缺口核心配置 */
  --notch-diameter: 28px; /* 调整这个数值改缺口大小 */
  -webkit-mask: radial-gradient(
    circle at top right,
    transparent var(--notch-diameter),
    #000 calc(var(--notch-diameter) + 1px)
  );
  mask: radial-gradient(
    circle at top right,
    transparent var(--notch-diameter),
    #000 calc(var(--notch-diameter) + 1px)
  );
}

/* 补全缺口位置的边框，不需要边框可以删掉这段 */
.notch-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at top right,
    transparent calc(var(--notch-diameter) - 1px),
    #e5e7eb var(--notch-diameter),
    transparent calc(var(--notch-diameter) + 1px)
  );
  border-radius: inherit;
}
</style>

调整方式很简单：

• 改缺口位置：修改radial-gradient里的位置参数，比如at top left是左上角缺口、at bottom right是右下角缺口
• 改缺口大小：调整--notch-diameter的数值即可
• 需要多个缺口的话，在mask属性里用逗号分隔追加多个radial-gradient配置就行

方案2：clip-path 实现（无边框场景适用） #

如果你的Card没有外边框，只有纯色/渐变填充，用clip-path写起来更简洁：

.notch-card {
  --notch-size: 28px;
  --card-radius: 12px; /* 和Card本身圆角值保持一致 */
  clip-path: polygon(
    0 var(--card-radius),
    var(--card-radius) 0,
    calc(100% - var(--notch-size)) 0,
    100% var(--notch-size),
    100% calc(100% - var(--card-radius)),
    calc(100% - var(--card-radius)) 100%,
    var(--card-radius) 100%,
    0 calc(100% - var(--card-radius))
  );
}

注意：这个方案实现的是直角切角效果，要做圆弧缺口优先选mask方案。

低版本兼容兜底方案 #

如果需要兼容年代特别久的浏览器，直接在缺口位置放一个和页面背景同色的圆形绝对定位元素，盖住对应位置即可，缺点是Card背后不是纯色背景时会穿帮，常规业务场景基本用不上。

以上方案都不需要引入任何第三方库，代码量极小，调整灵活度远高于现成组件库的插件，直接套到你现有组件上改下参数就能用。

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