直接写border: 1px在Retina屏发虚，是因1 CSS像素被映射为2物理像素并经抗锯齿混合成约0.7px灰边；根本原因是物理像素对齐失败，非CSS错误。
为什么直接写 border: 1px 在 Retina 屏会糊
不是 CSS 写错了，而是浏览器把 1 CSS 像素映射到了 2 个物理像素，再用抗锯齿一混合，视觉上就变成约 0.7px 的灰边——边缘发虚、颜色变浅。这不是边框“没生效”，是渲染机制导致的失真。
用 0.5px 边框前必须确认浏览器支持
不是所有设备都认 0.5px：iOS Safari 8+、Chrome 50+、Firefox 50+ 支持；但部分 Android WebView 和旧版 UC 浏览器会忽略或四舍五入为 1px。
- 用 JS 粗略判断更稳妥：
if (window.devicePixelRatio >= 2)加类名，而不是直接依赖0.5px渲染 - 别在 CSS 里写
@supports (border-width: 0.5px)—— 这个特性检测在 Safari 中始终返回true，不可靠 - 加了
0.5px后务必检查按钮内边距是否被压缩：padding不受影响，但box-sizing必须是border-box，否则整体尺寸会偏小
用 box-shadow 模拟细边框更兼容
box-shadow: 0 0 0 0.5px #ccc 是目前最稳的 fallback 方案，它绕过边框渲染路径，直接走光栅化，不会被抗锯齿柔化。
- 注意单位：写成
@border-hairline: 0.5px在 Less 中合法，但不能写0.5 px（空格会导致编译失败） - 阴影方案对
border-radius友好，圆角边缘依然锐利；而0.5px边框在大圆角下可能断开或显示不均 - 如果按钮有背景渐变或透明度，
box-shadow不会和背景层叠出意外色值，border则可能因混合模式变色
别踩这些坑
真正卡住人的往往不是技术选型，而是上下文细节：
- 用了
transform: scaleY(0.5)缩放整个按钮容器？这会让文字、图标、阴影全部二次采样，比边框糊得更彻底 - 在伪元素
::after里画边框却忘了content: ""和position: absolute？伪元素不生成框，阴影或边框根本不会渲染 - 全局重置了
* { box-sizing: border-box }，但按钮组件又显式写了box-sizing: content-box？这时候0.5px会吃掉内容宽度，按钮变窄 - 开发时只在 Chrome 模拟器看效果，没连真机（尤其是 iOS 17+ Safari）验证——模拟器的 DPR 渲染逻辑和真机有细微差异
边框模糊问题本质是物理像素对齐失败，所有方案都是在“让浏览器少做一次错误插值”。选 0.5px 还是 box-shadow 不重要，关键是确保它在目标设备上被真实绘制出来，而不是被忽略、截断或重采样。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
