iphone或dpr≥2设备上border:1px变粗是因设备像素比导致，稳定方案是伪元素+transform:scaley(0.5)；需满足position:relative、content:''、显式background-color、transform-origin:0 100%、pointer-events:none等条件。
直接写 border: 1px 在 iPhone 或 DPR ≥ 2 的安卓机上必然变粗，这不是写法错误，是设备像素比（window.devicePixelRatio）导致的物理渲染结果：1 个 CSS 像素被拉伸为 2 或 3 个物理像素，且浏览器不做降采样。真正能稳定落地的方案，是用伪元素 + transform: scaleY(0.5) 主动控制渲染精度。
为什么 border-width: 0.5px 几乎不可用
看似最直觉，但实际兼容性极差：
-
border-width: 0.5px在 iOS Safari 13+ 才开始有限支持，iOS 12 及更早版本直接忽略或四舍五入为1px - Android 4.4–6.0 系统 WebView、UC/QQ 浏览器普遍当作
0px渲染，边框直接消失 - 即使识别了，抗锯齿会让线条发虚；和
border-radius组合时边缘常模糊或断裂 -
getComputedStyle(el).borderWidth返回的仍是"1px"，无法靠 JS 判断是否生效
::after + transform: scaleY(0.5) 单边实现必须满足的条件
只写缩放不顶用，漏掉任意一条都会偏位、露白或挡点击：
- 父元素必须设
position: relative，否则::after会相对于body定位 -
::after必须有非空content: ''，且显式写background-color（无法继承父级颜色） -
transform-origin必须显式写成0 100%或left bottom，确保从底部向上压缩，不写就会上浮露白 - 必须加
pointer-events: none，否则 UC/QQ 浏览器下伪元素会拦截点击，列表项点不中 - iOS 12–15 对无前缀属性支持不稳定，需补
-webkit-transform和-webkit-transform-origin
四边 1px 边框如何避免缩放错位和裁切
单边用 scaleY 简单，四边一起缩放容易错位或被裁：
-
::after设top: 0; left: 0; right: 0; bottom: 0;，再写width: 200%; height: 200%，然后transform: scale(0.5) - 必须显式声明
box-sizing: border-box，否则默认content-box会让边框外扩，缩放后四角错位 -
transform-origin改为0 0（左上角），锚点才稳定，不随内容变化偏移 - 父容器若有
overflow: hidden，缩放后伪元素可能被裁——因为缩放基于原始尺寸计算，坐标系未同步收缩；可加will-change: transform提升图层防裁切
DPR=3 设备（如 iPhone 14 Pro）下 scaleY(0.5) 仍显粗怎么办
scaleY(0.5) 在 DPR=3 下实际占 1.5 物理像素（1px × 2 × 0.5 × 3 = 3 → 渲染为 1.5px），Safari 插值后仍发虚：
- 媒体查询兜底最稳妥：
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx)内覆盖transform: scaleY(0.333) - 但 Safari 对
scaleY(0.333)支持不稳定，更推荐 fallback 到box-shadow: 0 1px 1px -1px rgba(0,0,0,0.5)模拟下边框 - 或用
background: linear-gradient(to bottom, #ccc 50%, transparent 50%)，但需注意background-size和background-position微调困难 - 别试图用 JS 注入 class——首屏渲染前 JS 还没执行，白屏期边框就错了
真正容易被忽略的是：::after 的 content 必须是非空字符串，background-color 必须显式指定，且圆角边框用此法会失真——此时应改用 background: linear-gradient 或由父容器用 border-radius + overflow: hidden 裁剪伪元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
