根本解法是让边框精准落在单个物理像素上；推荐用linear-gradient模拟0.5px边框并确保整像素布局，::after+scale方案需满足position、transform-origin、pointer-events等四要素。
不是边框“变粗”了，是浏览器把 1 个 CSS 像素强行映射到多个物理像素后做了亚像素插值——你看到的发虚、加粗、灰边，全是 sub-pixel 渲染的结果。纯改 border-width 或加 box-shadow 都绕不开这个底层机制。
为什么 border: 0.5px 几乎总是失效
它看起来合理，但实际落地时问题一堆：
- 安卓 WebView（尤其 Android 4.x、UC、QQ 浏览器）直接四舍五入为
1px或忽略；getComputedStyle(el).borderWidth返回的仍是"1px" - iOS Safari 13+ 才开始有限支持，旧版直接当无效值处理
-
0.5px是逻辑值，不等于 1 物理像素：在dpr=3设备上，它仍被渲染为 1.5 物理像素，照样模糊 - 无法响应式适配不同
dpr，硬编码0.33px在dpr=2下反而变成 0.66 物理像素，更不可控
::after + transform: scaleY(0.5) 的真实约束条件
这个方案能用，但漏掉任意一条，就会偏位、断开、挡点击：
- 父容器必须设
position: relative，否则::after的bottom: 0会相对视口定位 -
transform-origin必须显式写成0 100%（左下角），缩放中心默认在中点，会导致边框上浮半像素 - 伪元素推荐用
height: 1px+background-color，别用border-bottom: 1px——后者受盒模型影响，缩放后边缘易糊 - 务必加
pointer-events: none，否则某些安卓 WebView 下伪元素会拦截所有点击 - iOS 12–15 对无前缀
transform支持不稳定，要补-webkit-transform和-webkit-transform-origin
真正兼容且可维护的渐变边框方案
用 background-image: linear-gradient() 绕过 border 渲染链，对齐物理像素更稳：
- 单边（如下边框）：
background: linear-gradient(to top, #ccc, #ccc) no-repeat left bottom / 100% 1px - 四边全边框：
background: linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%), linear-gradient(90deg, #ccc, #ccc 50%, transparent 50%), linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%), linear-gradient(90deg, #ccc, #ccc 50%, transparent 50%) - 不要写
linear-gradient(#ccc, #ccc)——缺方向参数在旧 Safari 里会失效 - 别和
border混用，否则多出一层渲染层，可能叠加变粗 - 圆角场景下，把
border-radius和overflow: hidden加在父容器上，由它裁剪渐变边框，比在伪元素上硬加border-radius更可靠
最常被忽略的是：即使用了渐变或伪元素，只要父容器或自身 top/left/width/height 含小数（比如 calc(50% - 0.5px) 或 flex 分配出 123.5px），sub-pixel 渲染就立刻激活。调试时盯住 Safari 开发者工具里的「Show Rasterization Borders」，有半透明描边就是没对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
