渐变背景下实现卡券缺口效果的方法
卡券类UI元素在设计时经常会用到缺口效果，模拟实体卡券的撕口或打孔特征。很多开发者会选择在纯色背景上实现缺口，但在渐变背景下实现这个效果时，如果处理不当就容易出现缺口边缘与背景不匹配的问题。本文将介绍几种在渐变背景下实现卡券缺口效果的方案，并给出对应的代码示例。
方案一：使用径向渐变背景模拟缺口
这种方案的核心思路是通过radial-gradient在卡券容器的背景中直接绘制出缺口形状，让缺口的颜色和渐变背景保持一致，就能实现无缝融合的效果。
实现步骤如下：
首先定义卡券的基础渐变背景
在渐变背景中添加径向渐变，绘制圆形缺口
调整径向渐变的位置和大小，匹配卡券缺口的布局需求
.coupon-card {
width: 320px;
height: 160px;
/* 基础线性渐变背景 */
background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
border-radius: 12px;
position: relative;
/* 径向渐变绘制左右两侧的圆形缺口，颜色和背景一致实现融合 */
background-image:
radial-gradient(circle at left center, transparent 12px, #ff7e5f 13px),
radial-gradient(circle at right center, transparent 12px, #feb47b 13px),
linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
background-size: 100% 100%, 100% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: left center, right center, left top;
padding: 20px;
box-sizing: border-box;
color: #fff;
}这种方案的优势是不需要额外的伪元素，直接通过背景叠加实现缺口，但是如果需要多个缺口或者缺口形状更复杂时，CSS代码会变得冗余。
方案二：伪元素+背景继承实现缺口
这个方案通过伪元素绘制缺口形状，并且让伪元素的背景继承父容器的渐变背景，这样缺口边缘就能和卡券背景完全匹配。
实现步骤如下：
卡券容器设置渐变背景，并且设置
position: relative使用
::before和::after伪元素分别绘制左右两个缺口伪元素的背景使用和父容器相同的渐变，并且通过
background-attachment: fixed让缺口的背景和容器背景对齐
.coupon-card {
width: 320px;
height: 160px;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
border-radius: 12px;
position: relative;
padding: 20px;
box-sizing: border-box;
color: #fff;
overflow: hidden;
}
/* 左侧缺口 */
.coupon-card::before {
content: '';
position: absolute;
left: -12px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
border-radius: 50%;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
background-attachment: fixed;
}
/* 右侧缺口 */
.coupon-card::after {
content: '';
position: absolute;
right: -12px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
border-radius: 50%;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
background-attachment: fixed;
}这里的关键是background-attachment: fixed，它让伪元素的背景相对于视口定位，只要伪元素的渐变参数和父容器完全一致，缺口部分的背景就能和容器背景完美衔接。如果卡券容器有滚动场景，需要调整background-attachment为scroll并重新计算背景位置。
方案三：CSS mask属性实现缺口
现代浏览器支持mask属性，我们可以通过遮罩的方式直接裁切出缺口，这种方式更容易控制缺口的数量和形状，也适合复杂的渐变背景。
实现步骤如下：
卡券容器设置渐变背景
通过
mask属性定义遮罩图形，遮罩中需要保留卡券主体区域，同时挖空缺口位置遮罩可以使用多个渐变组合，也可以引用SVG图形作为遮罩
.coupon-card {
width: 320px;
height: 160px;
background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
border-radius: 12px;
padding: ;
box-sizing: border-box;
color: #333;
/* 遮罩：保留整个卡券区域，挖空左右两个圆形缺口 */
-webkit-mask:
radial-gradient(circle at left center, transparent 12px, #000 13px),
radial-gradient(circle at right center, transparent 12px, #000 13px),
linear-gradient(#000, #000);
mask:
radial-gradient(circle at left center, transparent 12px, #000 13px),
radial-gradient(circle at right center, transparent 12px, #000 13px),
linear-gradient(#000, #000);
-webkit-mask-composite: source-out;
mask-composite: exclude;
-webkit-mask-size: 100% 100%, 100% 100%, 100% 100%;
mask-size: 100% 100%, 100% 100%, 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: left center, right center, left top;
mask-position: left right center, left top;
}这种方式的可扩展性最强，如果需要添加更多缺口，只需要在遮罩中增加对应的径向渐变即可。不过需要注意mask属性的浏览器兼容性，如果需要兼容旧版浏览器，需要添加对应的前缀。
三种方案对比
| 方案 | 实现难度 | 可扩展性 | 浏览器兼容性 | 适用场景 |
|---|---|---|---|---|
| 径向渐变背景模拟 | 低 | 差 | 优秀 | 简单卡券，少量固定缺口 |
| 伪元素+背景继承 | 中等 | 中等 | 良好 | 常规卡券，需要少量自定义缺口 |
| CSS mask属性 | 中等 | 优秀 | 一般（需前缀） | 复杂卡券，多缺口或特殊形状缺口 |
注意事项
在实际开发中，还需要注意以下几点：
如果卡券有边框效果，需要额外处理缺口处的边框，避免边框在缺口位置显示异常
渐变背景的角度和颜色值如果修改，需要同步更新所有相关缺口的背景参数，避免出现色差
如果卡券内容有动态变化，需要测试缺口位置是否会和内容重叠，必要时调整缺口的位置参数
通过以上几种方案，都可以在渐变背景下实现完美的卡券缺口效果，开发者可以根据实际的业务需求和浏览器兼容要求选择合适的实现方式。