1px实线边框在高DPI屏上变虚是因亚像素渲染导致，非CSS错误；推荐用box-shadow模拟实线，如box-shadow: 0 1px 0 0 #000，并配合viewport设置与媒体查询优化。

border: 1px solid #000 在不同设备上变虚线？原因不是 CSS 写错了

这不是你的 border 属性写得不对，而是高 DPI 屏幕（如 Retina、Windows 高缩放比）下，1px 物理像素被渲染为“亚像素”，浏览器可能自动做抗锯齿或模糊处理，导致视觉上像虚线或发虚。iOS Safari 和部分 Android WebView 尤其明显。

实操建议：

• 用 border: 1px solid #000 是基础，但仅靠它无法跨设备保真
• 优先检查是否启用了 viewport 缩放控制：确保 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 存在且未被覆盖
• 避免给父容器设 transform: scale(0.5) 或类似操作，这会进一步干扰像素对齐
• 不要依赖「看起来像 1px」的 hack（如 border-bottom: 0.5px solid），CSS 不支持小数像素值，会被四舍五入成 0 或 1

用 box-shadow 模拟实线边框更可靠

当真实 border 在高清屏上不可靠时，box-shadow 是目前最稳定替代方案，因为它绕过浏览器对 border 渲染的亚像素优化逻辑。

示例（底部实线）：

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

windows-shell

Windows 命令行编码与兼容规范。涵盖 GBK/UTF-8 编码、PowerShell/pwsh 互操作、Python/Node.js、Git 配置及代码生成规则。适用于 Windows 10/11 + MSYS2/Git Bash 环境下的所有命令行操作。

下载

.line {
  box-shadow: 0 1px 0 0 #000;
}

说明：

• 0 1px 0 0 表示水平偏移 0、垂直偏移 1px、无模糊、无扩散 —— 等效于一条紧贴元素下沿的实线
• 支持所有现代浏览器，包括 iOS 10+ 和 Android Chrome
• 若需四边实线，可用逗号分隔多个阴影：box-shadow: 0 1px 0 0 #000, -1px 0 0 0 #000, 0 -1px 0 0 #000, 1px 0 0 0 #000
• 注意：该方法不占布局空间（不像 border 会影响 box-sizing），需确认设计是否允许此行为

viewport + device-pixel-ratio 媒体查询辅助适配

对极端情况（如 Windows 125% 缩放 + Chrome），可结合媒体查询动态调整边框粗细，让视觉宽度一致：

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .border-1px {
    border: 0.5px solid #000;
  }
}

但注意：

• 0.5px 在部分浏览器中会被解析为 1px，并非真正半像素；它的作用是触发高 DPR 下更精细的渲染路径
• 必须配合 viewport 的 initial-scale=1.0 使用，否则媒体查询可能失效
• 不要单独依赖这个方案，应与 box-shadow 方案组合使用

Flex/Grid 容器内边框错位？检查 align-items 和基线对齐

在 Flex 或 Grid 布局中，即使写了 border: 1px solid，边框也可能因子项默认 align-items: stretch 或文字基线对齐而出现“断开”“偏移”“不闭合”等现象，误以为是虚线。

排查要点：

• 给边框所在元素加 vertical-align: top（适用于 inline-level 元素）
• 若在 Flex 容器中，尝试 align-items: flex-start 或显式设 height 避免拉伸变形
• 用浏览器开发者工具的「Layout」面板查看实际 border-box 尺寸，确认是否被 margin/padding/line-height 挤压变形
• 禁用所有继承的 font-size、line-height 影响后测试，常有意外收获

设备像素比、缩放设置、布局上下文三者叠加时，边框表现最容易失真。与其反复调 border-width，不如把 box-shadow 当作默认实线方案，再按需叠加媒体查询微调。