最稳方案是用clip-path: polygon()实现锯齿边缘，避免border-image、linear-gradient等易错方式；需用相对单位、闭合坐标、伪元素或drop-shadow处理阴影，safari需双前缀并注意顶点精度。
锯齿边缘用 clip-path 最稳，别碰 border-image
直接说结论：CSS3 里实现优惠券常见的锯齿状底边（比如“撕纸”效果），clip-path 是目前最可控、兼容性足够（Chrome 55+/Firefox 54+/Safari 15.4+）、且不依赖图片的方案。border-image 看似合理，但实际中锯齿对齐难、缩放易糊、移动端适配差，容易白忙活。
常见错误是拿 linear-gradient 叠加多个条纹模拟锯齿——它只能做规则重复纹路，无法精准控制单侧边缘形状，一旦要配合圆角或阴影就露馅。
实操建议：
- 用
clip-path: polygon(...)明确描述整个轮廓，把底部替换成一连串等距三角形顶点 - 锯齿宽度和高度建议用
em或rem，方便随文字缩放；避免固定px值，否则在高 DPR 屏幕上边缘发虚 - 如果容器有
border-radius，必须把圆角点也写进polygon()里，否则clip-path会直接裁掉圆角 - 加
outline: 1px solid transparent防止 Safari 下锯齿边缘偶尔出现 1px 抖动
怎么写出可复用的锯齿 polygon() 坐标？
手写一长串坐标既容易错又难维护。推荐用函数生成——比如用 CSS 自定义属性控制齿数和深度，再配合 @property（仅 Chrome/Firefox 支持）或 JS 注入。但更务实的做法是预设几档：
例如底部 6 齿、每齿宽 20px、高 8px 的常见优惠券，polygon() 应该这样写：
clip-path: polygon( 0% 0%, 100% 0%, 100% calc(100% - 8px), 96.66% calc(100% - 0px), 93.33% calc(100% - 8px), 90% calc(100% - 0px), 86.66% calc(100% - 8px), 83.33% calc(100% - 0px), 80% calc(100% - 8px), 76.66% calc(100% - 0px), 73.33% calc(100% - 8px), 70% calc(100% - 0px), 66.66% calc(100% - 8px), 63.33% calc(100% - 0px), 60% calc(100% - 8px), 56.66% calc(100% - 0px), 53.33% calc(100% - 8px), 50% calc(100% - 0px), 46.66% calc(100% - 8px), 43.33% calc(100% - 0px), 40% calc(100% - 8px), 36.66% calc(100% - 0px), 33.33% calc(100% - 8px), 30% calc(100% - 0px), 26.66% calc(100% - 8px), 23.33% calc(100% - 0px), 20% calc(100% - 8px), 16.66% calc(100% - 0px), 13.33% calc(100% - 8px), 10% calc(100% - 0px), 6.66% calc(100% - 8px), 3.33% calc(100% - 0px), 0% calc(100% - 8px) );
注意：所有百分比坐标必须严格按顺时针顺序闭合，漏一个点或顺序错，整个形状就失效。Safari 对坐标精度更敏感，小数位建议统一保留两位。
锯齿边缘 + 阴影/描边怎么不出破绽？
直接给带 clip-path 的元素加 box-shadow，阴影也会被裁剪——看起来像“没影子”。真需求其实是让阴影落在锯齿下方，而不是贴着锯齿走。
解决方法只有两个：
- 用伪元素
::after单独画一层阴影：定位到父容器底部，clip-path和主元素一致，但transform: translateY(2px)拉开距离，再加filter: blur(4px) - 放弃
box-shadow，改用drop-shadow()滤镜：filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15))—— 它作用于整个裁剪后图形，能自然包裹锯齿边缘 - 若需描边（比如齿尖加金线），不能用
border，得用另一个clip-path稍微放大一圈，再用background或outline模拟，否则描边会被自身裁掉
IE 和旧版 Safari 用户看到的是什么？
它们不支持 clip-path（或只支持 url(#svg) 写法）。如果你必须兼容 IE11，唯一可靠 fallback 是用 SVG <clippath></clippath> 外链，但意味着每个优惠券都要嵌一个 SVG 定义，维护成本陡增。
更现实的做法是：检测 clip-path 支持，降级为平直底边 + 微妙渐变色差模拟“层次感”，同时确保文字信息完整、CTA 按钮依然醒目——毕竟用户要的是优惠，不是锯齿。
真正容易被忽略的点：锯齿只是视觉糖，别让它拖慢渲染。避免在滚动区域里大量使用高复杂度 polygon()（顶点超 50 个），尤其在低端 Android 设备上，clip-path 重绘开销明显高于纯色背景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
