最可控方案是伪元素+transform:scaley(0.5)，需设position:relative、height:1px+background-color、transform-origin:0 100%、pointer-events:none，并加-webkit前缀；dpr=3时建议媒体查询兜底或改用box-shadow/linear-gradient。
没有单个 CSS 属性能直接解决这个问题。所谓“1px 边框变粗”，本质是 border-width: 1px 在高 DPR（如 iPhone 的 dpr=2/3）下被渲染为多个物理像素，而浏览器对 border-width: 0.5px 或 0.33px 的支持极不可靠——多数安卓 WebView 直接忽略或四舍五入回 1px，getComputedStyle 返回的仍是 "1px"。
伪元素 + transform:scaleY(0.5) 是目前最可控的落地方案
它不依赖浏览器对子像素边框的支持，而是用缩放主动控制渲染精度：
- 父元素必须设
position: relative，否则::after会脱离上下文定位 -
::after用height: 1px+background-color，别用border-bottom: 1px—— 后者缩放后易模糊且受盒模型干扰 -
transform-origin必须写成0 100%（左下角），不能只写bottom；Safari 某些版本会失效 - 必须加
pointer-events: none，否则伪元素可能拦截点击，尤其在安卓 WebView 中 - 要加
-webkit-transform和-webkit-transform-origin前缀，iOS 12–15 对无前缀属性支持不稳定
四边边框需用 scale(0.5) + box-sizing:border-box
单边缩放简单，四边一起缩放容易偏移或露白：
-
::after尺寸设为width: 200%; height: 200%，border: 1px solid #000，再transform: scale(0.5) -
transform-origin改为0 0（左上角），确保锚点稳定 - 必须显式声明
box-sizing: border-box，否则默认content-box会让边框外扩，缩放后位置飘移 -
scale(0.5)只覆盖 dpr=2；dpr=3（如 iPhone 12+）建议用媒体查询兜底：@media (-webkit-min-device-pixel-ratio: 3)内改用scale(0.333)，但 Safari 渲染不稳定，更推荐 fallback 到box-shadow或linear-gradient
border-image 和 box-shadow 是有限场景下的替代选择
它们不依赖伪元素和 transform，但适用范围窄：
-
border-image需预设图片资源，维护成本高；border-image-slice值稍有偏差就露白，且无法响应主题色变更 -
box-shadow: 0 1px 1px -1px rgba(0,0,0,0.5)可模拟下边框，但在 iOS 上部分机型阴影发虚，安卓某些 WebView 渲染不一致 -
background-image: linear-gradient方案需多层渐变叠加，background-size和background-position微调困难，dpr=3 时仍需额外适配
真正踩过坑的人知道：缩放后的伪元素如果漏掉 pointer-events: none，某些安卓 WebView 下 touch 事件会丢失；transform-origin 写成 left bottom 而非 0 100%，真机上就可能抬高半像素——这些细节不连真机调试根本发现不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
