根本原因是亚像素渲染导致1px边框模糊断续，并非代码错误；常见于高DPR屏幕或缩放场景，可通过box-shadow模拟、媒体查询适配或检查样式覆盖解决。
为什么 border: 1px solid #000 在某些情况下显示成虚线？
根本原因不是 HTML5 的问题，而是 CSS 渲染受缩放、设备像素比（DPR）、浏览器抗锯齿策略或父容器 transform（如 scale(0.99)）干扰所致。常见于 Chrome 或 Edge 在高 DPI 屏幕（如 MacBook Retina、Windows 缩放 125%/150%）下，1px 边框被渲染为亚像素线，浏览器自动降级为“视觉上接近虚线”的模糊/断续效果。
- 不是代码写错，
solid语义依然生效，只是像素对齐失败 - 检查开发者工具的“Computed”面板，确认
border-style确实是solid，但渲染层已失真 - 移动端 WebView 或 Electron 应用中更易复现，因默认启用 subpixel rendering
强制实线显示的 3 种可靠写法
绕过亚像素问题的核心思路：让边框占据整数物理像素，或用其他绘制方式替代 1px border。
- 用
box-shadow模拟实线：box-shadow: 0 0 0 1px #000;—— 不受缩放影响，兼容性好（IE10+） - 改用
outline（仅适用单边/无圆角场景）：outline: 1px solid #000;，但不支持border-radius - 媒体查询适配高 DPR：
@media (-webkit-min-device-pixel-ratio: 2) { .el { border: 0.5px solid #000; } }，需配合transform: scale(2)补偿尺寸（慎用，可能引发布局偏移）
border-style: solid 被覆盖的隐蔽原因
即使写了 solid，也可能被更高优先级规则覆盖，尤其在组件库或重置 CSS（如 Normalize.css）中。
- 检查是否被
* { border-style: none !important; }类似全局重置干掉 - 第三方 UI 库（如 Element Plus、Ant Design）可能对
button、input等元素设了默认border: none - 伪元素
::before/::after的content为空字符串时，部分浏览器会忽略其边框声明
复制代码后边框变虚线的典型操作失误
用户常从博客、CodePen 复制代码，但忽略上下文依赖：
立即学习“前端免费学习笔记（深入）”；
- 漏掉
，导致移动端强制缩放，触发亚像素渲染 - 复制的 CSS 片段含注释如
/* 1px 边框 hack */，实际用了border: 0.5px solid这类非标准值（Safari 旧版不支持） - HTML 结构套了多层
transform: translateZ(0)或will-change: transform，意外开启 GPU 渲染并改变边框采样方式
最稳妥的做法：在目标元素上直接写 border: 1px solid #000，禁用所有 transform 相关属性，再用 box-shadow 替代方案兜底。亚像素问题没有银弹，得看具体环境选对策。
