如何用CSS mask实现卡券的缺口渐变效果
卡券是电商、活动平台常见的UI元素，通常需要在边缘设计圆形缺口、锯齿等效果，同时搭配渐变背景提升视觉层次。传统实现方式多依赖背景图叠加或多层元素拼接，不仅维护成本高，还容易出现适配问题。而CSS mask属性可以通过遮罩层精准控制元素的可视区域，配合渐变语法，能高效实现带渐变的卡券缺口效果。
一、CSS mask核心概念
CSS mask属性允许开发者使用图像、渐变等作为遮罩，控制元素的显示范围：遮罩中完全不透明的区域会显示对应元素内容，完全透明的区域会隐藏元素内容，半透明区域则对应半透明显示效果。
实现卡券缺口效果主要用到以下mask相关属性：
mask-image：指定遮罩的图像或渐变，是实现缺口的核心属性
mask-size：设置遮罩的尺寸，控制缺口的大小和分布
mask-repeat：设置遮罩的重复方式，用于生成多个均匀分布的缺口
mask-position：调整遮罩的位置，适配缺口的排版需求
二、基础卡券缺口实现
我们先实现一个带有左右两侧圆形缺口的基础卡券，步骤如下：
1. 基础卡券结构
首先定义卡券的HTML结构，只需要一个容器元素即可：
<div class="coupon"> <div class="coupon-content"> <h3>满100减20优惠券</h3> <p>有效期：2024-01-01 至 2024-12-31</p> </div> </div>
2. 基础样式与缺口遮罩
通过mask-image生成带圆形缺口的遮罩，mask-repeat控制缺口重复，实现左右边缘的缺口效果：
.coupon {
width: 320px;
height: 120px;
/* 基础背景色，后续替换为渐变 */
background: #ff6b6b;
border-radius: 8px;
position: relative;
/* 遮罩：左右两侧生成圆形缺口，中间区域显示 */
mask-image: radial-gradient(
circle at 0 50%,
transparent 12px,
#000 12px
), radial-gradient(
circle at 100% 50%,
transparent 12px,
#000 12px
);
/* 遮罩尺寸：每个遮罩宽24px（直径），高度100% */
mask-size: 24px 100%, 24px 100%;
/* 遮罩不重复（左右各一个） */
mask-repeat: no-repeat;
/* 遮罩位置：左侧、右侧分别对齐 */
mask-position: left, right;
}
.coupon-content {
padding: 20px;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.coupon-content h3 {
margin: 0 0 8px 0;
font-size: 18px;
}
.coupon-content p {
margin: 0;
font-size: 14px;
opacity: 0.9;
}上述代码中，我们用了两个径向渐变作为遮罩：第一个径向渐变生成左侧的圆形缺口，圆心在元素左侧中点，透明半径12px，超出后变为不透明（#000对应完全显示）；第二个径向渐变生成右侧的圆形缺口，圆心在右侧中点。两个遮罩分别定位到左右两侧，就实现了基础缺口效果。
三、添加渐变背景效果
卡券通常需要渐变背景提升质感，我们只需要在.coupon的background属性中设置渐变，再结合之前的mask遮罩，就能同时实现缺口和渐变效果：
.coupon {
width: 320px;
height: 120px;
/* 线性渐变背景：从浅红到深红 */
background: linear-gradient(135deg, #ff8e8e 0%, #ff4d4d 100%);
border-radius: 8px;
/* 遮罩配置保持不变 */
mask-image: radial-gradient(
circle at 0 50%,
transparent 12px,
#000 12px
), radial-gradient(
circle at 100% 50%,
transparent 12px,
#000 12px
);
mask-size: 24px 100%, 24px 100%;
mask-repeat: no-repeat;
mask-position: left, right;
}此时卡券会同时显示渐变背景和左右两侧的圆形缺口，渐变会自然过渡到缺口边缘，不会出现生硬的截断效果。
四、扩展：实现多缺口与锯齿效果
1. 上下边缘多缺口
如果需要上下边缘均匀分布多个圆形缺口，只需要调整mask-repeat为repeat，同时调整mask-size实现间距控制：
.coupon-multi {
width: 320px;
height: 120px;
background: linear-gradient(135deg, #42b983 0%, #2c8c6e 100%);
border-radius: 8px;
/* 上下边缘生成多个圆形缺口 */
mask-image: radial-gradient(
circle at 50% 0,
transparent 8px,
#000 8px
), radial-gradient(
circle at 50% 100%,
transparent 8px,
#000 8px
);
/* 每个缺口宽20px，高20px，间距均匀分布 */
mask-size: 20px 20px;
/* 水平重复，垂直不重复 */
mask-repeat: repeat-x;
/* 分别定位到顶部、底部 */
mask-position: top, bottom;
}2. 锯齿边缘效果
锯齿效果可以通过线性渐变配合mask实现，用倾斜的线性渐变生成重复的锯齿形状：
.coupon-sawtooth {
width: 320px;
height: 120px;
background: linear-gradient(135deg, #369 0%, #1a4d7a 100%);
border-radius: 8px;
/* 线性渐变生成锯齿：45度倾斜，黑白交替形成锯齿 */
mask-image: linear-gradient(
45deg,
#000 25%,
transparent 25%,
transparent 50%,
#000 50%,
#000 75%,
transparent 75%,
transparent
);
/* 锯齿尺寸：每个锯齿宽20px，高20px */
mask-size: 20px 20px;
/* 重复覆盖整个元素 */
mask-repeat: repeat;
}五、兼容性与注意事项
CSS mask属性的兼容性目前覆盖主流现代浏览器，部分旧版本浏览器需要添加前缀：
Chrome、Edge、Firefox、Safari等现代浏览器均支持无前缀mask属性
如果需要兼容旧版本浏览器，可添加-webkit-mask-前缀的属性，例如
-webkit-mask-image遮罩中#000仅代表完全不透明，也可以使用rgba(0,0,0,1)等不透明颜色，透明区域使用transparent或rgba(0,0,0,0)即可
如果卡券内部有子元素，遮罩会作用于整个.coupon容器，子元素内容也会被遮罩裁剪，无需额外处理
六、完整示例
以下是包含渐变背景、左右双缺口的完整卡券实现代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS mask卡券效果</title>
<style>
.coupon {
width: 320px;
height: 120px;
background: linear-gradient(135deg, #ff8e8e 0%, #ff4d4d 100%);
border-radius: 8px;
mask-image: radial-gradient(
circle at 0 50%,
transparent 12px,
#000 12px
), radial-gradient(
circle at 100% 50%,
transparent 12px,
#000 12px
);
mask-size: 24px 100%, 24px 100%;
mask-repeat: no-repeat;
mask-position: left, right;
}
.coupon-content {
padding: 20px;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.coupon-content h3 {
margin: 0 0 8px 0;
font-size: 18px;
}
.coupon-content p {
margin: 0;
font-size: 14px;
opacity: 0.9;
}
</style>
</head>
<body>
<div class="coupon">
<div class="coupon-content">
<h3>满100减20优惠券</h3>
<p>有效期：2024-01-01 至 2024-12-31</p>
</div>
</div>
</body>
</html>通过这种方式实现的卡券缺口渐变效果，无需额外背景图，代码可维护性强，调整缺口大小、渐变颜色只需要修改对应的CSS属性即可，适配不同尺寸和风格的卡券需求。