虚线撕裂效果需用linear-gradient模拟可控锯齿，因原生dashed渲染不一致、打印易失效；水平撕裂用repeat-x梯度，垂直/弧形边缘用radial-gradient拼接，并须在@media print中重写背景、避免outline/box-shadow、设明确高度。
虚线撕裂效果在票据样式里不是“加个 border-style: dashed”就能搞定的，它本质是视觉欺骗：用一组错位、渐变、或重复的断续线条模拟纸张被物理撕开后的毛边。直接套用默认虚线，大概率在热敏打印机上糊成一条灰线，或在 PDF 导出时完全消失。
为什么 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() 模拟可控撕裂线
这是目前最轻量、兼容性最好、且能精确控制“齿距”的方案。原理是把背景当成画布，用色块拼出重复的“实-空-实”节奏，方向垂直于撕裂走向。
水平撕裂线（常见于票据底部）：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
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 值是否还站得住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
