伪元素+transform: scaley(0.5)是最稳定解法，因dpr导致1px被拉伸为2或3物理像素，而0.5px兼容性差、无法继承颜色且易发虚。
直接写 border: 1px 在 iPhone 或高 DPR 安卓机上必然变粗，这不是代码错误，是设备像素比（window.devicePixelRatio）导致的物理渲染结果——浏览器把 1 CSS 像素拉伸成 2 或 3 个物理像素，且不做降采样。真正能精确控制“视觉 1px”的方案，只有伪元素缩放 + 显式锚点控制这一条路走得最稳。
为什么 border-width: 0.5px 几乎不能用
看似最直觉，实则踩坑最多：0.5px 在 iOS Safari 13+ 才开始有限支持，Android 4.4–6.0 系统 WebView 直接忽略或四舍五入为 1px；getComputedStyle(el).borderWidth 返回的仍是 "1px"，不是 bug，是渲染引擎硬性限制。更麻烦的是：
-
0.5px无法和border-radius共存，圆角会截断边框 - 颜色无法继承，必须每个地方硬写
border-color - 加
box-shadow或filter后易引发渲染异常 - 测试需靠
document.createElement('div').style.border = '0.5px solid transparent'+offsetHeight判断，线上不可控
::after + transform: scaleY(0.5) 怎么写才不偏位
缩放本身不难，错位才是真坑。关键不在 scaleY(0.5)，而在定位基点和父容器约束：
- 父元素必须设
position: relative，否则::after的bottom: 0会相对于body定位 -
transform-origin必须显式写成0 100%（左下角），不能只写bottom或left bottom；Safari 某些版本对默认值解析不一致 - 伪元素推荐用
height: 1px+background-color，别用border-bottom: 1px——后者受盒模型干扰，缩放后边缘易虚、位置飘 - 务必加
pointer-events: none，否则 UC/QQ 浏览器下伪元素会拦截点击，列表项点不中 - iOS 12–15 对无前缀属性支持不稳定，必须补
-webkit-transform和-webkit-transform-origin
四边 1px 边框怎么避免缩放偏移和露白
单边缩放简单，四边一起缩放容易错位或裁边，关键在尺寸撑开 + 锚点锁定：
-
::after设top: 0; left: 0; right: 0; bottom: 0;，再写width: 200%; height: 200%，然后transform: scale(0.5) -
transform-origin改为0 0（左上角），确保缩放锚点稳定，不随内容变化偏移 - 伪元素必须显式声明
box-sizing: border-box，否则默认content-box让边框外扩，缩放后四角错位 - 父容器若有
overflow: hidden，缩放后伪元素可能被裁——因为缩放基于原始 200% 尺寸计算，坐标系未同步收缩，可加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微调困难 - 真正容易被忽略的是：
::after的content必须是非空字符串（哪怕只是' '），且background-color必须显式指定，无法自动继承父级颜色
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
