如何制作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() 模拟可控撕裂线

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

水平撕裂线（常见于票据底部）：

立即学习“前端免费学习笔记（深入）”；

div.tear-bottom { height: 12px; background: linear-gradient(to right, #000 0, #000 2px, transparent 2px, transparent 8px); background-size: 8px 100%; background-repeat: repeat-x; }

• 2px 是“齿尖宽度”，8px 是完整周期（齿尖+缺口），二者差值就是缺口宽度（6px）
• background-size: 8px 100% 必须显式声明，否则默认 repeat 会拉伸变形
• 不要用 repeating-linear-gradient —— Safari 旧版对其解析不稳定，容易首尾错位
• 若需适配高 DPR 屏（如 iPhone），加媒体查询：@media (-webkit-min-device-pixel-ratio: 2) { ... background-size: 4px 100%; }

配合径向渐变做顶部/侧边锯齿边缘

票据四角或顶部常需“波浪形撕裂”，这时单靠线性渐变难表现弧度。用两个反向的 radial-gradient 左右拼接，能自然形成向外凸出的齿状边缘：

.ticket { width: 384px; height: 240px; background: radial-gradient(circle at -6% 50%, transparent 10%, #fff 12%) left, radial-gradient(circle at 106% 50%, transparent 10%, #fff 12%) right; background-size: 50% 100%; background-repeat: no-repeat; border: 0.5px solid #000; }

• 两个渐变中心分别设在容器外侧（-6% 和 106%），半径控制齿深；12% 是渐变截止点，决定齿尖锐度
• background-size: 50% 100% 确保左右各占一半，无缝衔接
• 必须搭配 border: 0.5px solid #000 补足中间未覆盖区域，否则齿与齿之间会漏白
• 别用 background-color: #fff 直接覆盖——热敏打印机不识别背景色，此层纯为屏幕预览

打印时虚线撕裂失效的三个关键避坑点

即使屏幕看着完美，一进 window.print() 就崩，往往卡在这三处：

• @media print 里没重写撕裂层：浏览器打印视图会丢弃所有未在 @media print 中声明的 background，必须复制一遍梯度规则
• 用了 outline 或 box-shadow 模拟第二层线：这两者在绝大多数打印引擎中不渲染，包括 Chrome DevTools 的 Print Preview
• 撕裂层元素没设 height 或 min-height：无内容的空 div 在打印时可能被压缩为 0 高，整条撕裂线消失；务必给明确高度，哪怕只是 height: 8px

真正难的不是画出锯齿，而是让这组像素节奏在从屏幕→打印预览→热敏纸→PDF 导出的全链路里保持一致。每换一种输出目标，都要单独验证那几行 background-size 和 background-position 值是否还站得住。