如何制作HTML票据样式，实现CSS票据虚线撕裂效果？

本文共计1108个文字，预计阅读时间需要5分钟。

虚拟线撕裂效果在数据样式格式中并非加个 border-style: dashed;就能搞定的，它本质上是视觉欺骗：

为什么 border: 2px dashed #000 在票据上总显得假

浏览器对 dashed 的渲染逻辑不统一——Chrome 把 2px dashed 渲染成“2px 实段 + 4px 空隙”，Firefox 可能变成“1.8px 实段 + 4.2px 空隙”，Safari 在高 DPI 屏上甚至直接退化为点状。而票据要求的是可预测的、物理级一致的“锯齿节奏”，比如每 6px 出现一个 2px 宽的缺口，这个精度原生 dashed 给不了。

• 打印引擎（如 Chrome Headless、wkhtmltopdf）通常忽略 border-style: dashed 的语义，只取 border 的“存在感”，导致导出 PDF 后变成实线或干脆没线
• 热敏小票纸宽仅 58mm（≈384px），默认虚线的空隙比例过大，看起来像断掉的线，而非撕裂感
• 若父容器用了 transform: scale() 或 zoom，虚线节拍会被非线性拉伸，锯齿错乱

用 background: linear-gradient() 模拟可控撕裂线

这是目前最轻量、兼容性最好、且能精确控制“齿距”的方案。原理是把背景当成画布，用色块拼出重复的“实-空-实”节奏，方向垂直于撕裂走向。