最可靠方式是用 clip-path polygon() 配合相对单位精确控制锯齿坐标，避免 border 或伪元素拼接导致的错位模糊；需预留足够 padding 防文字被裁，搭配 filter: drop-shadow() 和 ::before 白边模拟压印效果。
怎么用 CSS 实现优惠券的锯齿边（notched edge）
纯 CSS 实现锯齿边最可靠的方式是用 clip-path 配合多边形坐标，而不是依赖 border 或伪元素拼接——后者在高缩放、不同设备像素比下容易错位或模糊。
常见错误是直接用 border + transform: rotate() 画小三角，结果锯齿不齐、响应式失效、打印时消失。
-
clip-path: polygon()可精确控制每个“齿”的起点和终点，适配任意宽度 - 推荐用相对单位（如
5%、calc(50% - 10px)），避免固定像素导致缩放失真 - 注意 Safari 旧版本（≤15.4）对
clip-path的polygon()支持不完整，需加-webkit-clip-path
/* 示例：顶部带 3 个锯齿的优惠券上边缘 */
.coupon {
-webkit-clip-path: polygon(0% 10%, 10% 0%, 20% 10%, 30% 0%, 40% 10%, 50% 0%, 60% 10%, 70% 0%, 80% 10%, 90% 0%, 100% 10%, 100% 100%, 0% 100%);
clip-path: polygon(0% 10%, 10% 0%, 20% 10%, 30% 0%, 40% 10%, 50% 0%, 60% 10%, 70% 0%, 80% 10%, 90% 0%, 100% 10%, 100% 100%, 0% 100%);
}
如何让优惠券带阴影+内凹白边（模拟印刷压印效果）
真实优惠券常有轻微内陷白边+柔和投影，仅靠 box-shadow 不够；必须叠加 outline 或伪元素模拟「压印」层次感。
直接套两层 box-shadow 容易发虚、边界糊，且无法控制内边距方向。
- 用
::before绘制一层稍小的白色矩形，z-index: -1置底，再叠加外阴影 - 避免用
outline—— 它不占布局空间，但无法设置圆角跟随，锯齿边会露馅 - 阴影建议用
filter: drop-shadow()替代box-shadow，它作用于整个裁剪后形状（包括clip-path边缘）
.coupon {
position: relative;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.1));
}
.coupon::before {
content: '';
position: absolute;
top: 2px; left: 2px; right: 2px; bottom: 2px;
background: #fff;
border-radius: 8px;
z-index: -1;
}
优惠券文字排版怎么避免被锯齿边切掉
锯齿边本质是视觉裁剪，但文本流仍按原始矩形盒子计算，导致 padding 不足时文字紧贴齿尖甚至被裁掉——这不是 bug，是 clip-path 的正常行为。
- 锯齿区域不能只靠视觉欺骗，必须预留物理内边距：
padding-top至少 ≥ 锯齿最大高度（例如上面例子中最高点是 0%，最低是 10%，差值为 10%，所以padding-top: 12%更安全） - 文字容器不要设
overflow: hidden，否则锯齿内部文字可能被二次裁剪 - 如需居中标题，用
flex+align-items，别依赖line-height垂直居中，锯齿会让行高基准偏移
移动端锯齿边变形或闪烁怎么办
iOS Safari 和部分安卓 WebView 在滚动或缩放时重绘 clip-path 容易抖动，尤其用百分比坐标时。
- 强制开启硬件加速：
transform: translateZ(0)或will-change: clip-path（慎用，只加在动态变化的元素上） - 避免在
clip-path中混用vw/vh和%，统一用视口单位或百分比 - 锯齿数量建议固定为奇数（如 3 或 5），偶数在居中逻辑下易因舍入误差出现不对称
- 真机测试时重点看 pinch-zoom 后是否重绘错位——这时候
clip-path坐标若含小数（如33.333%），务必用Math.round()或 CSSround()函数（支持度有限，优先用整数百分比）
锯齿边不是装饰细节，它参与整个容器的几何定义。写完记得用 outline: 1px solid red 临时打开原盒模型，对照锯齿路径调 padding 和 clip-path 坐标。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
