根本原因是CSS的1px为逻辑像素，在DPR≥2的高清屏上被映射为多个物理像素，导致视觉变粗；伪元素方案需满足pointer-events: none、transform-origin: 0 0及父容器position: relative三条件，渐变方案更鲁棒因其不依赖缩放、兼容圆角且不干扰事件。
高清屏下1px边框变粗的根本原因
CSS里的1px是逻辑像素，不是物理像素。在DPR=2的iPhone上，1个CSS像素对应2×2个物理像素，浏览器会把border: 1px渲染成2物理像素宽——看起来就是“粗边框”。这不是bug，是设备渲染机制决定的。
关键点在于：viewport缩放、rem方案、vw单位都会让整个页面等比缩放，但border-width用px时不参与缩放计算，它始终按当前DPR直接映射为物理像素数。
伪元素+transform缩放方案怎么写才不翻车
这个方案本质是画一个2px边框，再用transform: scale(0.5)压回1物理像素。但容易漏掉三个硬性条件：
-
pointer-events: none必须加，否则伪元素会挡住点击事件 -
transform-origin: 0 0必须设，否则缩放后边框会偏移（尤其在flex/grid子项里） - 父容器
position必须是relative或absolute，否则absolute伪元素会脱离文档流乱飘
示例最小可用结构：
立即学习“前端免费学习笔记（深入）”；
.box { position: relative; }
.box::after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 2px solid #ccc;
pointer-events: none;
transform-origin: 0 0;
}
[data-dpr="2"] .box::after { transform: scale(0.5); }
[data-dpr="3"] .box::after { transform: scale(0.333333); }为什么background-image渐变方案更鲁棒
伪元素方案在以下场景会失效：
- 容器有
border-radius：缩放后圆角边缘锯齿明显 - 容器是flex/grid子项且设置了
flex-shrink: 0：伪元素尺寸计算异常 - 需要叠加多层边框或阴影：z-index和层级容易冲突
渐变方案绕过缩放，直接在背景里“画线”：
.box-border-1px {
background-image:
linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%),
linear-gradient(90deg, #ccc, #ccc 50%, transparent 50%),
linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%),
linear-gradient(90deg, #ccc, #ccc 50%, transparent 50%);
background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
background-position: top, right, bottom, left;
background-repeat: no-repeat;
}它不依赖定位、不干扰事件、兼容圆角，唯一要注意的是background-origin默认是padding-box，如果盒子有padding，边框会向内偏移——此时需显式设background-origin: border-box。
rem/vw方案里如何让边框“不缩放”
如果你用rem做整体缩放（比如html { font-size: 100 * screen.width / 750 + 'px' }），所有用rem写的尺寸都会跟着变，但边框通常不该变粗。
正确做法是：边框坚持用px单位，而不是换算成rem。例如：
- 容器宽度写
3.75rem（对应设计稿375px） - 边框写
border: 1px solid #000（保持1逻辑像素，由设备DPR决定物理粗细）
同理，用vw时，该缩放的用width: 20vw，边框仍用1px。混用单位才是可控的关键——强行把边框也转成vw，反而会在小屏上细得看不见。
最易忽略的一点：某些UI框架（如早期Ant Design Mobile）会全局把border写成0.5px试图模拟1物理像素，这在Chrome 80+已不被支持，直接渲染为0。必须回归1px + 伪元素或渐变方案。
