HTML5 里用 border 设实线边框，但别只写 border: 1px solid #000
直接写 border 确实能显示实线，但打印时经常变虚、变淡甚至消失——不是你显示器问题，是浏览器默认对打印媒体做了「降级处理」：禁用部分颜色、弱化细线、跳过背景和某些边框样式。
关键不是“怎么画出来”，而是“怎么让打印机也认它”。必须显式指定打印媒体样式，并加固边框参数：
-
border-width至少设为0.5pt或1pt（注意单位！pt是印刷标准，px在打印时无固定物理尺寸） -
border-color避免用#ccc这类浅灰，优先用#000或black - 必须用
@media print单独覆盖，不能只靠屏幕样式继承
加 @media print 规则后仍没效果？检查这三点
写了 @media 却没生效，大概率卡在这几个实际细节上：
- 样式表是否被
media="screen"属性限制？会直接屏蔽打印样式，删掉media属性或改成media="all" - 有没有其他 CSS 规则在打印时把
border覆盖成none？比如重置库（normalize.css）或 UI 框架（Bootstrap）自带的打印样式，用浏览器打印预览模式的开发者工具，勾选「print」模拟，逐层检查 computed 样式 -
border-style别偷懒写solid就完事——有些旧版 IE/Edge 打印引擎对缩写解析不稳定，拆开写：border-top-style: solid; border-right-style: solid;更稳妥
打印实线边框太细或断续？试试 outline 替代方案
当 border 在特定打印机（尤其激光机低 DPI 模式）下依然发虚，可临时用 outline 做补救。它不占布局空间，但打印兼容性反而更好：
立即学习“前端免费学习笔记（深入）”；
@media print {
.print-border {
border: none;
outline: 1pt solid black;
outline-offset: -1pt; /* 往内收一点，视觉更贴合原边框位置 */
}
}注意：outline 不支持圆角、不支持四边不同样式，仅适合矩形容器的紧急兜底。真要保精度，导出 PDF 再打印仍是目前最稳的路径。
用 window.print() 触发前，强制刷新打印样式
动态生成内容后调用 window.print()，常因样式未重绘导致边框丢失。别依赖 DOM 更新自动触发：
- 在
print()前加getComputedStyle(document.body).color这类强制重排语句 - 或者更直接：给容器加个临时 class 触发重绘，例如
el.classList.add('force-print'); setTimeout(() => el.classList.remove('force-print'), 10); - 避免在
print()后立刻修改 DOM，部分浏览器会中断打印队列
边框能不能打出来，本质是「浏览器告诉打印机什么」和「打印机信不信」之间的匹配问题。没有银弹，但盯住 pt 单位、@media print 独立声明、以及打印预览里的 computed 样式，就能避开八成坑。
