border-style: solid 在 HTML5 中依然有效，其取值规则未变，实线边框发虚等问题源于 subpixel 渲染与像素对齐，而非属性失效；修复需结合 transform、box-sizing 等控制渲染行为。
border-style: solid 在 HTML5 中依然有效
HTML5 没有废除或修改 border-style 的取值规则，solid 仍是标准且最常用的实线边框值。所谓“新版浏览器实线边框属性变化”，其实是误解——变化的不是语法，而是渲染细节（比如 subpixel 渲染、缩放下的像素对齐）和开发者对默认样式的关注度提升。
常见错误现象：border: 1px solid #000 在高 DPI 屏幕或 zoom=110% 下看起来发虚、偏灰、不锐利。
- 根本原因不是
solid失效，而是浏览器用 subpixel 抗锯齿绘制了本该对齐像素边界的边框 - 旧版 IE 强制整像素渲染，反而“看起来更实”；现代浏览器追求平滑，但牺牲了部分清晰度
-
border-style的其他值（如dashed、dotted）同样受此影响，不单是solid
让实线边框真正“锐利”的 CSS 修复技巧
关键不是换属性，而是控制渲染行为和像素对齐。以下方法在 Chrome/Firefox/Safari（含最新版）均验证有效：
- 强制硬件加速触发更精确的像素对齐：
transform: translateZ(0)或will-change: transform - 避免小数宽度：确保
border-width是整数（如不用1.5px），且父容器未被非整数缩放影响 - 用
box-sizing: border-box配合明确 width/height，防止因计算误差导致边框错位 - 极端情况可尝试
-webkit-font-smoothing: subpixel-antialiased（仅限 WebKit，慎用）
示例修复写法：
.sharp-border {
border: 1px solid #000;
box-sizing: border-box;
transform: translateZ(0);
}
border-width 小于 1px 的兼容性陷阱
部分开发者尝试用 border-width: 0.5px 实现“更细实线”，但这在多数浏览器中不可靠：
立即学习“前端免费学习笔记（深入）”；
- Chrome 和 Safari 支持
0.5px，但仅当设备像素比（dpr）≥2 且页面未缩放时才渲染为物理 1px；否则四舍五入为 0 或 1px - Firefox 直接忽略非整数
border-width，降级为 0 - 移动端 WebView 表现更混乱，iOS WKWebView 对
0.5px支持不稳定 - 替代方案更稳妥：用
background-image: linear-gradient()或伪元素 +scaleY(0.5)
不要混淆 outline 和 border 的实线行为
有人误以为 outline: 1px solid #000 是 border 替代方案，但它本质不同：
-
outline不占据布局空间，无法设置border-radius，且不支持border-top-style等单边控制 -
outline的solid渲染更简单粗暴，基本不受 subpixel 影响，但位置在元素外侧，常会重叠内容 - 仅适合焦点态（
:focus）等语义场景，不能用于常规边框设计
真正需要“稳定实线”的地方，还是得回到 border + 像素对齐策略。复杂点在于：它从来不只是一个属性的事，而是 layout、transform、dpr、zoom 四者共同作用的结果。
