伪元素+transform: scale()是兼容性最好、可控性最强的1px边框方案，需配合transform-origin、pointer-events: none和position: relative，否则易偏位或拦截点击；其原理是先绘制1px伪元素（DPR=2下占2物理像素），再缩放0.5倍使CSS像素变为0.5，对应1物理像素。
直接结论：用伪元素 +是目前兼容性最好、可控性最强的方案，但必须配合、和父容器，否则缩放后边框会偏位或拦截点击。
为什么
能让 1px 变成 1 物理像素
它不是“减细”边框，而是先画一个 1px 的伪元素（在 DPR=2 设备上实际占 2 物理像素），再整体缩放到 0.5 倍——此时边框宽度变成 0.5 CSS 像素，在 DPR=2 下正好对应 1 物理像素。关键在于缩放的是伪元素本身，不影响内容区布局。
常见错误现象：
写了
但边框还是粗，大概率是没设
，导致缩放中心偏移
文字或图标被一起缩放变小，说明你对整个元素用了
，而不是只作用于
安卓 WebView 点不到按钮，是因为伪元素没加
单边边框（如底部）怎么写才不偏位
以底部边框为例，核心是定位锚点和缩放方向对齐：
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
父元素必须设
用
定位，确保贴底
必须写成
（左下角），不能只写
，Safari 旧版会失效
别用
，改用
+
，避免盒模型干扰
示例：
四边边框怎么安全实现
不能对四个方向分别用
或
，那样会破坏定位关系。正确做法是画一个完整包围框再整体缩放：
尺寸设为
，覆盖父容器并留出缩放余量
用
画框，再
改为
（左上角），保证缩放后四边精准对齐
必须加
，否则缩放后边框位置飘移
DPR=3 设备需单独适配：
容易被忽略的三个细节
真机测试才会暴露的问题：
不加，在部分安卓 WebView 下会拦截
，按钮点不动
父容器有
，缩放后的伪元素可能被裁掉——因为
不改变布局盒，但视觉区域变小了
页面被用户手动缩放（比如 iOS 双指放大）时，
会被二次缩放，边框又糊；这种场景无解，只能接受或引导重置缩放
transform: scale()transform-originpointer-events: noneposition: relativetransform: scale(0.5)scale(0.5)transform-origintransform::afterpointer-events: noneposition: relative::afterbottom: 0transform-origin0 100%bottomborder-bottom: 1pxheight: 1pxbackground-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;
}scaleYscaleX::afterwidth: 200%; height: 200%border: 1px solid #000transform: scale(0.5)transform-origin0 0box-sizing: border-box@media (-webkit-min-device-pixel-ratio: 3) { .border-all::after { transform: scale(0.333); } }pointer-events: nonetouchstartoverflow: hiddentransformtransform