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缩放控制：确保存在且未被覆盖 - 避免给父容器设
transform: scale(0.5)或类似操作，这会进一步干扰像素对齐 - 不要依赖「看起来像 1px」的 hack（如
border-bottom: 0.5px solid），CSS 不支持小数像素值，会被四舍五入成 0 或 1
用 box-shadow 模拟实线边框更可靠
当真实 border 在高清屏上不可靠时，box-shadow 是目前最稳定替代方案，因为它绕过浏览器对 border 渲染的亚像素优化逻辑。
示例（底部实线）：
立即学习“前端免费学习笔记（深入）”；
.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 当作默认实线方案，再按需叠加媒体查询微调。 
