layui表格在4k高分屏下边框模糊的根本原因是dpr≥2时1px被插值缩放导致抗锯齿，非css书写错误；推荐用border-image引用1×1 png实现稳定1物理像素渲染，或用@media配合transform:scaley(0.5)伪元素方案，并须覆盖.layui-table-fixed-l/r及滚动区域的边框样式。
4k高分屏下 layui 表格边框变粗、发虚、不清晰，不是 css 写错了，而是 1px 边框在设备像素比（dpr）≥ 2 时被浏览器插值缩放，渲染成非整数物理像素（如 1.5px 或 2px），触发抗锯齿导致模糊。直接改 border-width: 0.5px 无效——css 像素不支持小数渲染。
用 border-image 强制走 1 物理像素渲染
这是最稳定、兼容性最好的方案，绕过浏览器对 border-width 的缩放逻辑，让边框始终按 1 物理像素绘制。
- 准备一张
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;
}
⚠️ 注意：border-image 在 IE11+ 和所有现代浏览器均支持；Layui 官方已不兼容 IE8–10，无风险。
纯 CSS 方案：用 transform: scaleY(0.5) 模拟视觉 1px
适合不想引入额外图片资源的项目，但需精准控制作用范围，否则普通屏幕会显示过细边框。
- 只对高 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;
}
}
-
pointer-events: none必须加，否则伪元素会遮挡点击事件 -
transform-origin: top防止上下边框因缩放错位 - 该方案对
.layui-table-fixed-l、.layui-table-fixed-r等固定列区域同样生效，需一并覆盖
别漏掉固定列和滚动区域的边框
Layui 启用 fixed: true 或内容超宽时，会生成独立 DOM 结构：.layui-table-fixed-l、.layui-table-fixed-r、.layui-table-body，它们的 th/td 不受主表格 CSS 影响。
- 必须显式为这些区域追加相同规则，例如：
.layui-table-fixed-l .layui-table th,
.layui-table-fixed-l .layui-table td,
.layui-table-fixed-r .layui-table th,
.layui-table-fixed-r .layui-table td,
.layui-table-body .layui-table th,
.layui-table-body .layui-table td {
/* 同上 border-image 或 transform 规则 */
}
实际调试时，容易只改了主表而忽略这些隐藏结构，导致固定列边框依然模糊——这是最常被跳过的环节。
