最优雅且灵活的CSS锯齿边框实现方式是使用mask-image结合repeating-linear-gradient创建三角波形遮罩；1. 通过-webkit-mask-image和mask-image定义-45deg倾斜的重复渐变，transparent区域形成锯齿空隙；2. 设置mask-size为20px 20px控制单元尺寸；3. 用mask-position定位至底部；4. mask-repeat设为repeat-x实现水平重复。
锯齿边框的本质是用CSS渐变模拟锯齿形状
纯CSS实现锯齿边框不靠图片或SVG，核心思路是用 repeating-linear-gradient 在元素的某一边（通常是底部）画出等距、反向交替的三角形缺口。浏览器渲染时把渐变色块错位叠加，视觉上就形成连续锯齿。
常见错误是直接用 border-image 加 base64 图片——这虽然能用，但放大失真、维护困难、无法动态改颜色；另一个坑是试图用伪元素 + clip-path 拼锯齿，结果在 Safari 上兼容性差或渲染闪烁。
- 推荐只对
bottom边应用锯齿，其他三边保持实线，语义清晰且性能可控 - 锯齿高度建议设为
8px或12px，太小看不清，太大破坏卡片比例 - 渐变色停点必须严格计算：比如
0, 4px, 4px, 8px表示每 8px 一个完整锯齿周期，其中前半段画实色，后半段透明（或背景色）
具体写法：repeating-linear-gradient 的参数怎么配
关键不是“怎么写”，而是“为什么这样写”。下面这段代码画的是向下开口的锯齿（即优惠券底部有凹口）：
background: repeating-linear-gradient( 90deg, #ff6b6b, #ff6b6b 6px, transparent 6px, transparent 12px );
这里 90deg 表示水平方向渐变，6px 是每个“齿”的宽度，12px 是整个周期长度。如果想让锯齿更密，就把周期缩到 8px；想加粗齿边，就拉长实色段，比如 #ff6b6b 8px, transparent 8px, transparent 16px。
立即学习“前端免费学习笔记（深入）”；
注意：这个渐变必须配合 background-size 和容器高度使用。若容器 height 不固定，建议用伪元素单独承载锯齿背景，避免干扰内容流。
适配不同背景色：锯齿边缘发虚怎么办
当优惠券放在浅色背景上，锯齿和背景交界处容易出现半透明灰边——这不是bug，是亚像素渲染导致的抗锯齿残留。解决方案不是调 opacity，而是用硬切色：
- 把透明段改成和父容器背景色一致的颜色，比如
white 6px, white 12px - 或者给锯齿层加
backface-visibility: hidden，强制 GPU 渲染，多数情况下能压掉毛边 - 更稳妥的做法是加一层同色
box-shadow微调，例如box-shadow: 0 1px 0 #ff6b6b盖住最上沿
移动端适配与高DPI屏下的细节问题
在 iPhone 或 Windows 高分屏上，1px 实际可能渲染成 2 物理像素，导致锯齿变宽或错位。不能简单用 rem 或 vw 替代 px，因为渐变周期是绝对长度单位。
真正有效的做法只有两个：
- 用
@media (-webkit-min-device-pixel-ratio: 2)单独重写周期值，比如把12px改成11.5px（试出来的值，非整数可行） - 放弃纯 CSS，改用 inline SVG 作为
background-image，用vector-effect="non-scaling-stroke"锁定线条粗细
后者看似退步，但在需要精确控制多端显示的营销页里，反而更省调试时间。
