纯CSS实现锯齿优惠券边框最稳妥方式是用clip-path配合动态计算的polygon坐标，避免伪元素或SVG背景导致的错位、闪烁；微信小程序需降级为URL转义的内联SVG；真机dpr适配须用平台专属pixelRatio修正坐标。
uni-app里怎么用CSS画出锯齿状优惠券边框
直接上结论：纯CSS实现锯齿效果最稳妥的方式是用 clip-path 配合多边形坐标，而不是伪元素拼接或SVG背景——前者在iOS 14+和Android主流WebView中兼容稳定，后者容易因缩放或dpr导致锯齿错位。
常见错误是用 ::before + transform: rotate() 叠加多个小三角，结果在真机上出现1px白边、抗锯齿模糊，或者滚动时闪烁。这是因为uni-app的view组件在nvue渲染模式下不支持部分CSS变换层级。
- 推荐用绝对定位的
view盖在优惠券容器顶部，设置clip-path: polygon(...) - 坐标点要基于容器宽高动态计算，避免写死像素值（比如
100%比375rpx更安全） - 锯齿密度建议控制在每20rpx一个齿，太密会触发微信小程序Canvas降级，导致性能掉帧
uni-app中clip-path在微信小程序里失效怎么办
微信小程序基础库2.25.2之前不支持clip-path，uni-app编译成小程序时会静默忽略该样式。这不是你代码写错了，是平台限制。
绕过方法只有两个：降级为SVG内联，或改用canvas绘制。前者更轻量，但要注意SVG的viewBox必须和容器宽高严格匹配，否则拉伸变形。
- 把锯齿路径写成
，再用background-image: url(data:image/svg+xml,...) - 编码时必须对
>"做URL转义，否则小程序解析失败，报错invalid svg data - 不要用
base64，微信小程序对data URI长度有限制，超长会截断
优惠券领取按钮点击后如何同步更新锯齿区域状态
锯齿本身是装饰层，但用户点击“立即领取”后，常需要隐藏锯齿、显示“已领取”文字，或切换颜色。这时候不能只改class，因为clip-path动画不支持transition，硬加会导致iOS闪退。
- 用
v-if控制锯齿view显隐，比v-show更可靠 - 状态切换时，同时修改父容器的
background-color和锯齿层的opacity，视觉更连贯 - 如果用了SVG方案，记得把
fill属性也绑定到data，避免静态写死
真机调试时锯齿边缘发虚或偏移1px
这是dpr=2/3设备上最常见的问题。uni-app默认rpx按750设计稿换算，但clip-path坐标是逻辑像素，不会自动适配dpr，导致在iPhone 12等设备上每个齿宽变成0.5px物理像素，浏览器强制插值模糊。
解决方案不是调transform: scale(2)，而是用uni.getSystemInfoSync().pixelRatio动态修正坐标值：
const ratio = uni.getSystemInfoSync().pixelRatio
const points = ['0,0', `${20 * ratio},0`, `${15 * ratio},${10 * ratio}`, ...]
注意：这个ratio只在App端和H5端准确，小程序端要用wx.getSystemInfoSync().pixelRatio单独取，uni-app的API在不同平台返回值不一致。
复杂点在于，同一个优惠券组件可能被复用在首页弹窗、商品详情页、我的优惠券列表三个场景，每个场景容器宽度不同，而锯齿密度又不能随宽度线性缩放——齿太密像波浪线，太疏像梯形。实际开发中，建议把齿宽固定为16rpx，仅通过clip-path的Y轴偏移控制“是否显示顶部锯齿”，其他方向保持不变。
