移动端如何用CSS解决1px边框在高分屏变粗问题
使用伪元素配合transform: scale(0.5)是解决该问题的标准做法。通过创建一个绝对定位的伪元素，设置其border为1px，然后利用transform将宽高缩小一半并偏移位置，即可在视觉上实现真正的0.5px边框效果。
具体实现方案与代码结构
核心思路是利用::after或::before伪元素覆盖原元素边界，并通过transform-origin控制缩放基准点，确保边框紧贴边缘且不溢出。
.thin-border {
position: relative;
/* 其他样式 */
}
.thin-border::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 200%;
height: 200%;
border: 1px solid #ccc;
box-sizing: border-box;
pointer-events: none; /* 不阻挡点击 */
transform: scale(0.5);
transform-origin: 0 0;
}上述代码中，width和height设为200%，是因为后续scale(0.5)会将尺寸减半，从而还原为原始大小。关键在于transform-origin: 0 0，这表示缩放以左上角为原点，这样边框才能精确对齐父元素的左上角。如果省略此属性，默认中心缩放会导致边框偏离预期位置。
立即学习“前端免费学习笔记（深入）”；
不同缩放基准点对边框位置的影响
当修改transform-origin的值时，边框相对于父元素的位置会发生显著变化。例如，若设置为50% 50%，则边框会以中心为轴缩放，导致边框向四周收缩，无法贴合边缘。因此，必须根据边框需求选择正确的原点坐标。
.test-center {
transform-origin: 50% 50%;
/* 边框会向内收缩，脱离边缘 */
}
.test-top-left {
transform-origin: 0 0;
/* 边框紧贴左上角 */
}在实际开发中，如果需要四边都有边框，通常只需对::after设置border而非单独的四条边。若仅需单边边框，需调整left、top及width/height的比例。例如，仅底部边框可设bottom: 0，left: 0，width: 200%，height: 200%，并将transform-origin设为0 100%（即左下角），以确保底部边框正确对齐。
