::after + transform: scaley(0.5)能压出真1物理像素，因在dpr=2设备上将标准1px伪元素纵向压缩至1个物理像素；需配合transform-origin、box-sizing: border-box、width/height: 200%、position: relative及pointer-events: none才可靠生效。
为什么::after + transform: scaleY(0.5)能压出真1物理像素
高DPR设备（如iPhone 8/13、多数安卓旗舰）中，border: 1px会被浏览器渲染为2或3个物理像素宽，再叠加抗锯齿，结果就是发虚、偏粗。缩放不是“猜”，而是先画一个标准高度的伪元素（比如height: 1px），再用transform: scaleY(0.5)纵向压缩——在dpr=2设备上，刚好落到1个物理像素。实践中统一用0.5比硬写0.333更稳，浮点精度、SCSS编译、浏览器渲染抖动都会让后者失真。
单边边框（如下边框）必须设transform-origin: 0 100%
不设transform-origin，缩放默认以伪元素中心为锚点，下边框会整体上移，底部留白；上边框则下移遮内容；左右边框也会左右错开。漏掉这行，scaleY(0.5)就等于白写。
- 下边框：必须用
transform-origin: 0 100%或left bottom - 上边框：用
transform-origin: 0 0或left top - 左边框：改用
transform: scaleX(0.5)+transform-origin: 0 0 - 右边框：用
transform: scaleX(0.5)+transform-origin: 100% 0
四边全边框时box-sizing: border-box和width/height: 200%缺一不可
如果伪元素用top: 0; left: 0; right: 0; bottom: 0;并设border: 1px solid，默认box-sizing: content-box会让实际尺寸 = 内容区 + 各方向1px边框 → 缩放后仍溢出父容器1px，导致角落发虚、边缘多出半像素黑线。
- 正确组合是：
width: 200%、height: 200%→ 紧跟box-sizing: border-box→ 再加transform: scale(0.5) - 父元素必须有
position: relative，否则::after会脱标定位到body - 务必加
pointer-events: none，否则伪元素会拦截点击 - 若父容器有
overflow: hidden，缩放后伪元素可能被裁——因为缩放基于原始200%尺寸计算，坐标系未同步收缩
颜色、内容、兼容性三个容易被忽略的细节
::after的content必须是非空字符串（哪怕只是' '），否则伪元素不渲染；background-color不能继承，必须显式指定；圆角边框用此法会失真，此时应由父容器设border-radius + overflow: hidden来裁剪，而非在伪元素上直接设圆角。
- iOS 12–15 对无前缀支持不稳定，必须加
-webkit-transform和-webkit-transform-origin - 不要用
border-bottom: 1px做底边——受盒模型影响，缩放后内容区易被挤，边缘还易模糊；优先用height: 1px+background-color - 真正难的不是写出那几行CSS，而是五个点必须同时对齐：缩放值、原点、盒模型、定位、事件拦截——少一个就会在某台手机上突然失效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
