HTML5本身不提供边框样式，实线边框仅由CSS的border-style: solid实现；清晰1px边框需综合控制border-width、box-sizing、设备像素比及避免祖先缩放干扰。
HTML5 中没有 border-style: solid 以外的“实线”边框类型
所谓“实线边框”，在 CSS 里就是 border-style: solid，HTML5 本身不提供边框设置能力，所有样式都靠 CSS 控制。很多人搜“HTML5 边框实线”，其实是混淆了语义——真正要调的是 border 相关 CSS 属性。
让 border 更细更清晰的关键是控制 border-width 和抗锯齿行为
浏览器默认渲染下，1px 边框在高分屏或缩放后容易发虚、发灰甚至消失。这不是 bug，而是像素对齐问题。解决思路不是“隐藏技巧”，而是精准控制：
-
border-width设为1px是基础，但必须配合box-sizing: border-box避免尺寸溢出 - 避免用
0.5px（部分旧浏览器不支持），可改用thin（实际表现因 UA 而异，不推荐） - 对高清屏（dpr > 1），可用媒体查询 +
transform: scale(0.5)模拟 0.5px，但需同时调整容器尺寸和transform-origin - 更稳妥的做法：用
background-image或linear-gradient绘制 1px 线，绕过 border 渲染限制
例如模拟上边框：
.thin-top-border {
background-image: linear-gradient(to bottom, #000, #000);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: top;
}
别用 outline 伪装实线边框
有人试图用 outline: 1px solid #000 替代 border 来“变细”，这是危险操作：
立即学习“前端免费学习笔记（深入）”；
-
outline不占布局空间，可能遮挡内容或导致点击区域错位 -
outline无法单独设置某一边（如只想要下边框），也不支持圆角border-radius - 键盘聚焦时
outline会强制显示，干扰设计，且去除它会影响可访问性
真正影响清晰度的常被忽略点：父容器 font-size 和缩放
当父元素设置了 font-size: 0 或使用了 transform: scale()，子元素的 1px 边框可能被等比缩放，导致视觉变粗或模糊。排查时注意：
- 检查祖先元素是否含
transform、zoom或强制缩放 CSS - 避免在根元素（
:root或html）设font-size小于16px后再用 rem 布局，否则 border 宽度计算易失准 - Chrome 中启用
chrome://flags/#force-device-scale-factor可能放大整个渲染层，让所有 1px 边框变厚
边框是否清晰，从来不是单靠一个属性能解决的事；它卡在像素对齐、设备像素比、CSS 渲染优先级和祖先样式污染之间。动手前先打开 DevTools 的“Rendering”面板，勾选“Paint flashing”和“Layer borders”，看看到底哪一层在糊。
