1px边框在高dpi屏发虚是因浏览器按devicepixelratio缩放导致亚像素渲染；解决方案有二：一是用border-image加载1×1 png强制整像素绘制，二是用transform:scaley(0.5)配合媒体查询实现视觉1px且对齐物理像素。
直接结论：1px 边框在高 DPI 屏上发虚，不是 CSS 写错了，是浏览器把 1 CSS px 渲染成非整数物理像素（比如 1.25px），导致抗锯齿模糊。必须让边框始终走 1 物理像素渲染路径。
为什么 border: 1px solid #e6e6e6 在 MacBook 或 Windows 高缩放屏上变灰变虚
根本原因是 border-width 被浏览器按 window.devicePixelRatio 插值缩放，不触发整像素栅格化。例如在 125% 缩放（DPR=1.25）下，1px 实际被渲染为 1.25 物理像素——这个值无法对齐屏幕硬件像素网格，只能靠插值模糊填充。
- 该问题在
.layui-table、table原生表格、以及所有用border实现细线的组件中普遍存在 - 仅靠改颜色或加
box-shadow无效，因为底层仍是亚像素绘制 - Chrome/Firefox/Safari 行为一致，不是 bug，是规范行为
用 border-image 强制走 1 物理像素渲染
绕过 border-width 缩放逻辑，让浏览器把边框当“贴图”处理，只拉伸图像内容，不缩放边框宽度本身。
- 准备一张 1×1 的 PNG，颜色填你要的边框色（如
#e6e6e6），保存为static/img/border-1px.png - 覆盖默认样式，确保权重足够（放在你项目 CSS 文件末尾）：
.layui-table th, .layui-table td {
border-width: 1px !important;
border-style: solid !important;
border-color: transparent !important;
border-image: url(../img/border-1px.png) 1 stretch;
}
- IE11+ 和所有现代浏览器都支持
border-image，Layui 场景无兼容风险 - 注意：不要省略
border-color: transparent，否则 fallback 边框会干扰
纯 CSS 方案：transform: scaleY(0.5) + 媒体查询
适合不想引入额外图片资源的场景。原理是先画 2px 边框，再视觉缩放到等效 1px，且 GPU 合成层天然保持整像素对齐。
- 只作用于高 DPI 设备，避免普通屏边框过细：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.layui-table th, .layui-table td {
border-width: 2px !important;
border-color: #e6e6e6 !important;
}
.layui-table th::after, .layui-table td::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
border: 1px solid #e6e6e6;
pointer-events: none;
transform: scaleY(0.5);
transform-origin: top;
}
}
- 必须用
::after伪元素实现，否则transform会影响单元格内容布局 -
transform-origin: top确保缩放锚点在顶部，避免下移错位 - 若表格有固定列（
.layui-table-fixed），这些 DOM 分支也得同步加样式
别漏掉 border-collapse: separate 的副作用
部分方案依赖 border-collapse: separate（比如解决双线重叠时），但它会让 border-image 或 transform 边框在相邻单元格间留出空隙，需手动补全。
- 检查是否意外启用了
border-spacing，必须设为0 - 若用了
separate模式，th和td的边框要错位定义（例如td只设border-bottom和border-right，table补border-top和border-left） - 固定列容器（
.layui-table-fixed-l）和表头吸附层（.layui-table-header）必须单独适配，它们的 DOM 结构与主表不共享样式流
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
