用::before加clip-path替代多三角rotate拼锯齿，可避免亚像素渲染错位；需用整数百分比+calc()（如calc(10% - 2px)）写polygon坐标，统一设backface-visibility:hidden并配合overflow:hidden防圆角裁切。
用 ::before + transform: rotate() 拼锯齿容易错位
很多人想靠伪元素画一堆小三角，再用 transform: rotate(45deg) 拼出锯齿，结果在 iPhone 或安卓高刷屏上出现 1px 白边、滚动闪烁、缩放后齿距不均。这不是代码写错了，是浏览器对 rotate 的亚像素渲染不稳定，尤其在 position: absolute + 高频重绘场景下更明显。
真正能落地的方案是：只用一个 ::before 覆盖顶部区域，配合 clip-path 精确裁出齿形，而不是靠 N 个三角叠加。这样既避免层叠顺序混乱，也绕开 transform 插值误差。
- 每个小三角必须设
backface-visibility: hidden，否则 iOS Safari 会强制开启硬件加速导致边缘发虚 - 别用
top: 0; left: 0; width: 10px; height: 10px;这类固定尺寸——响应式下齿宽会塌缩或溢出 - 如果父容器有
border-radius，伪元素必须加overflow: hidden，否则圆角会把三角切掉一角
clip-path: polygon() 坐标怎么算才不踩坑
直接抄网上 polygon(0% 0%, 10% 0%, 10% 10%, ...) 很危险：Safari ≤15.4 不支持百分比坐标里的小数，5.5% 会被截断成 5%，导致齿偏移；Android WebView 对 calc() 解析也不一致。
稳妥写法是统一用整数百分比 + calc() 控制基准点，例如顶部锯齿可写成：
.coupon {
-webkit-clip-path: polygon(
0% 12%,
calc(10% - 2px) 0%,
calc(10% + 2px) 0%,
calc(20% - 2px) 0%,
calc(20% + 2px) 0%,
100% 12%,
100% 100%,
0% 100%
);
clip-path: polygon(
0% 12%,
calc(10% - 2px) 0%,
calc(10% + 2px) 0%,
calc(20% - 2px) 0%,
calc(20% + 2px) 0%,
100% 12%,
100% 100%,
0% 100%
);
}
- 所有
calc()中的像素值（如2px）建议 ≥ 2，避开 Safari 对1px的舍入误差 - 首尾纵坐标（如
12%）要略大于 0，否则文字紧贴边缘时可能被裁掉 - 微信小程序基础库 background-image: url("data:image/svg+xml,%3Csvg...%3E")
锯齿和圆角、阴影怎么共存不打架
优惠券既要 border-radius: 12px，又要顶部锯齿，还想要投影——三者叠加时，border-radius 会优先裁剪 clip-path 后的形状，导致齿尖变圆；而 box-shadow 又只投原始矩形轮廓，锯齿边缘没阴影。
正确顺序是：先用 clip-path 定义异形，再用 filter: drop-shadow() 投影，最后用 ::before 绘制白边模拟压印。关键在 filter 作用于裁剪后的真实形状，不是盒模型边界。
- 禁用
box-shadow，它不识别clip-path边缘 -
::before必须设z-index: -1，且尺寸比主容器小2px，才能形成内凹白边效果 - 如果用了
background-clip: padding-box实现四角切角，就别再套clip-path，两者冲突会导致 Safari 渲染空白
真机 dpr=3 下锯齿模糊怎么办
iPhone 14 Pro 上明明写了 10% 0%，实际渲染却像 1.5px 宽还带灰边——这是设备像素比把逻辑像素拉伸了，但 clip-path 坐标不会自动乘以 dpr。
不能靠 transform: scale(3) 补偿，那会让整个元素失真；也不能用 JS 动态改样式，太重。实测最轻量方案是媒体查询 + background-size 微调（针对 radial-gradient 方案），或直接换 SVG。
- 对纯
clip-path方案，用@media (-webkit-min-device-pixel-ratio: 3)重写一组更密的坐标，比如把10%改成9.8% - 如果已用
repeating-radial-gradient，把background-size: 20px 20px改为60px 60px并配@media切换 - 终极兼容：SVG 内联，
<path d="M0,0 L20,0 L15,10 L20,20 L0,20 Z"></path>，天然适配任意 dpr
真实项目里，锯齿不是装饰，是用户识别优惠券的第一视觉锚点。坐标算错 1%，打印出来就露白边；dpr 没适配，iOS 用户看到的就是毛边。这些细节没法靠“差不多”糊弄过去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
