使用 transform: scale(0.5) 配合 transform-origin 是解决该问题的标准方案。通过设置伪元素宽度为 200%，并在高dpi屏幕上将其缩放至 0.5，即可在物理像素上实现 1px 的边框效果。
为什么直接设置border-width无效
在Retina或更高分辨率的移动设备上，CSS中的 1px 并不等于设备的 1px 物理像素。浏览器通常将CSS像素映射到多个物理像素，导致视觉上边框变粗。直接使用 border-width: 1px 无法解决这个问题，因为这是逻辑像素的定义，而非物理渲染的控制。
.thin-border { position: relative; border: none; } .thin-border::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background-color: #ccc; transform-origin: left top; }如何适配不同屏幕密度
为了适配不同的屏幕密度，需要结合媒体查询检测设备的像素比（dpr）。当 dpr 大于 1 时，应用缩放变换。对于 dpr=2 的设备，缩放比例为 0.5；对于 dpr=3 的设备，缩放比例为 0.3333。这样可以确保在不同密度的屏幕上，边框的物理宽度都接近 1px。
立即学习“前端免费学习笔记（深入）”；
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .thin-border::after { transform: scaleY(0.5); } } @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) { .thin-border::after { transform: scaleY(0.3333); } }如何处理底部边框的特殊情况
当需要绘制底部边框时，只需调整伪元素的定位和缩放方向。将 height 设为 200%，width 设为 100%，并将 transform-origin 设为 left bottom。在缩放时，使用 scaleX 而不是 scaleY，以确保边框在水平方向上被压缩，从而在垂直方向上呈现 1px 的物理高度。
