transform:scale(0.5)能实现真正1px物理边框，是因为它将2px边框缩放为视觉1px，利用高dpr屏幕的渲染精度保留清晰边缘，但需配合overflow:hidden裁剪溢出、transform-origin精准锚点及动态适配dpr。
为什么transform:scale(0.5)能画出真正的1px物理边框？
移动设备屏幕像素密度高（如 iPhone 的 Retina 屏 dpr=2 或 3），CSS 中的 1px 实际渲染为 2px 或 3px 物理像素，视觉上变粗。直接设 border: 1px solid #ccc 在高清屏下就是“假1px”。用 transform: scale(0.5) 是把一个 2px 的边框缩放到视觉尺寸为 1px——本质是让渲染引擎在更高分辨率下绘制再缩小，保留清晰边缘。
关键点在于：必须配合容器的 transform-origin 和父容器的 overflow: hidden，否则缩放后边框会溢出或错位。
实际写法中必须加overflow: hidden的原因
缩放元素时，其盒模型尺寸（包括边框）仍按原始大小参与布局。比如一个宽高 100px、带 2px 边框的元素，transform: scale(0.5) 后视觉上变小了，但布局占位仍是 100px × 100px，且边框向外延伸 1px（默认 border-box 下边框在 content 外），导致右边/下边多出 1px 渲染残留。
解决方案：
- 给父容器加上
overflow: hidden，裁掉缩放后溢出的部分 - 设置
transform-origin: 0 0（或top left），确保缩放锚点在左上角，避免位移 - 边框必须画在元素自身上，不能依赖伪元素 + 绝对定位（除非也同步缩放并重置 origin）
border-bottom单边缩放时的常见错位现象
只对底部边框做缩放（比如模拟 cell 列表分割线），容易出现半像素模糊或上下跳动，尤其在滚动时。这是因为 scale(0.5) 后，原 2px 高的 border-bottom 被压成 1px，但若元素本身没有强制高度或行高对齐，基线位置可能浮动。
稳定做法：
- 给元素设固定
height（如height: 44px），并用line-height垂直居中内容 - 边框统一画在伪元素上：
::after创建 2px 高块，transform: scaleY(0.5)+transform-origin: bottom - 避免用
top: 100%定位伪元素，改用bottom: 0并设height: 2px
dpr适配不能只靠scale(0.5)
iPhone SE（dpr=2）、iPhone 14 Pro（dpr=3）、部分安卓机（dpr=2.75）的像素比不同。硬写 scale(0.5) 在 dpr=3 设备上会画出 1.5px 边框（2px × 0.5 = 1px，但 dpr=3 需要 3px → 缩放 0.333… 才对）。
生产环境推荐方案：
- 用 JS 读取
window.devicePixelRatio，动态写 CSS 变量，如--scale: calc(1 / 2) - 或使用 postcss 插件（如
postcss-pxtorem配合媒体查询）生成多档缩放规则 - 更轻量的做法：只针对 dpr > 1 的设备启用缩放，dpr=1（PC 或低清屏）走普通 1px
1 / dpr，不是固定 0.5。很多项目卡在这里——写了 scale 却没区分设备，结果在某些安卓机上边框发虚或消失。
真正难的不是写出那行 transform，而是缩放后和其他布局元素（比如 flex gap、margin、字体抗锯齿）的协同。这些细节不测真机很容易漏掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
