最可靠方式是用 clip-path polygon() 配合相对单位精确控制锯齿坐标，避免 border 或伪元素拼接导致的错位模糊；需预留足够 padding 防文字被裁，搭配 filter: drop-shadow() 和 ::before 白边模拟压印效果。
怎么用 CSS 实现优惠券的锯齿边（notched edge）
纯 CSS 实现锯齿边最可靠的方式是用
配合多边形坐标，而不是依赖 border 或伪元素拼接——后者在高缩放、不同设备像素比下容易错位或模糊。
常见错误是直接用
+
画小三角，结果锯齿不齐、响应式失效、打印时消失。
可精确控制每个“齿”的起点和终点，适配任意宽度
推荐用相对单位（如
、
），避免固定像素导致缩放失真
注意 Safari 旧版本（≤15.4）对
的
支持不完整，需加
如何让优惠券带阴影+内凹白边（模拟印刷压印效果）
真实优惠券常有轻微内陷白边+柔和投影，仅靠
不够；必须叠加
或伪元素模拟「压印」层次感。
直接套两层
容易发虚、边界糊，且无法控制内边距方向。
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
用
绘制一层稍小的白色矩形，
置底，再叠加外阴影
避免用
—— 它不占布局空间，但无法设置圆角跟随，锯齿边会露馅
阴影建议用
替代
，它作用于整个裁剪后形状（包括
边缘）
优惠券文字排版怎么避免被锯齿边切掉
锯齿边本质是视觉裁剪，但文本流仍按原始矩形盒子计算，导致
不足时文字紧贴齿尖甚至被裁掉——这不是 bug，是
的正常行为。
锯齿区域不能只靠视觉欺骗，必须预留物理内边距：
至少 ≥ 锯齿最大高度（例如上面例子中最高点是 0%，最低是 10%，差值为 10%，所以
更安全）
文字容器不要设
，否则锯齿内部文字可能被二次裁剪
如需居中标题，用
+
，别依赖
垂直居中，锯齿会让行高基准偏移
移动端锯齿边变形或闪烁怎么办
iOS Safari 和部分安卓 WebView 在滚动或缩放时重绘
容易抖动，尤其用百分比坐标时。
强制开启硬件加速：
或
（慎用，只加在动态变化的元素上）
避免在
中混用
和
，统一用视口单位或百分比
锯齿数量建议固定为奇数（如 3 或 5），偶数在居中逻辑下易因舍入误差出现不对称
真机测试时重点看 pinch-zoom 后是否重绘错位——这时候
坐标若含小数（如
），务必用
或 CSS
函数（支持度有限，优先用整数百分比）
锯齿边不是装饰细节，它参与整个容器的几何定义。写完记得用
临时打开原盒模型，对照锯齿路径调 padding 和 clip-path 坐标。
clip-pathbordertransform: rotate()clip-path: polygon()5%calc(50% - 10px)clip-pathpolygon()-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-shadowoutlinebox-shadow::beforez-index: -1outlinefilter: drop-shadow()box-shadowclip-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;
}paddingclip-pathpadding-toppadding-top: 12%overflow: hiddenflexalign-itemsline-heightclip-pathtransform: translateZ(0)will-change: clip-pathclip-pathvw/vh%clip-path33.333%Math.round()round()outline: 1px solid red