伪元素+transform: scale()是兼容性最好、可控性最强的1px边框方案，需配合transform-origin、pointer-events: none和position: relative，否则易偏位或拦截点击；其原理是先绘制1px伪元素（dpr=2下占2物理像素），再缩放0.5倍使css像素变为0.5，对应1物理像素。
直接结论：用伪元素 + transform: scale() 是目前兼容性最好、可控性最强的方案，但必须配合 transform-origin、pointer-events: none 和父容器 position: relative，否则缩放后边框会偏位或拦截点击。
为什么 transform: scale(0.5) 能让 1px 变成 1 物理像素
它不是“减细”边框，而是先画一个 1px 的伪元素（在 DPR=2 设备上实际占 2 物理像素），再整体缩放到 0.5 倍——此时边框宽度变成 0.5 CSS 像素，在 DPR=2 下正好对应 1 物理像素。关键在于缩放的是伪元素本身，不影响内容区布局。
常见错误现象：
- 写了
scale(0.5)但边框还是粗，大概率是没设transform-origin，导致缩放中心偏移 - 文字或图标被一起缩放变小，说明你对整个元素用了
transform，而不是只作用于::after - 安卓 WebView 点不到按钮，是因为伪元素没加
pointer-events: none
单边边框（如底部）怎么写才不偏位
以底部边框为例，核心是定位锚点和缩放方向对齐：
- 父元素必须设
position: relative -
::after用bottom: 0定位，确保贴底 -
transform-origin必须写成0 100%（左下角），不能只写bottom，Safari 旧版会失效 - 别用
border-bottom: 1px，改用height: 1px+background-color，避免盒模型干扰
示例：
.hairline-bottom {
position: relative;
}
.hairline-bottom::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background-color: #ccc;
transform: scaleY(0.5);
transform-origin: 0 100%;
pointer-events: none;
}
四边边框怎么安全实现
不能对四个方向分别用 scaleY 或 scaleX，那样会破坏定位关系。正确做法是画一个完整包围框再整体缩放：
-
::after尺寸设为width: 200%; height: 200%，覆盖父容器并留出缩放余量 - 用
border: 1px solid #000画框，再transform: scale(0.5) -
transform-origin改为0 0（左上角），保证缩放后四边精准对齐 - 必须加
box-sizing: border-box，否则缩放后边框位置飘移 - DPR=3 设备需单独适配：
@media (-webkit-min-device-pixel-ratio: 3) { .border-all::after { transform: scale(0.333); } }
容易被忽略的三个细节
真机测试才会暴露的问题：
-
pointer-events: none不加，在部分安卓 WebView 下会拦截touchstart，按钮点不动 - 父容器有
overflow: hidden，缩放后的伪元素可能被裁掉——因为transform不改变布局盒，但视觉区域变小了 - 页面被用户手动缩放（比如 iOS 双指放大）时，
transform会被二次缩放，边框又糊；这种场景无解，只能接受或引导重置缩放
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
