直接写border: 1px在高DPR设备上必然变粗，因1 CSS像素被拉伸为2或3物理像素；“视觉1px”须用::after伪元素+scaleY(0.5)+transform-origin: 0 100%+pointer-events: none实现，避免布局崩坏与点击失效。
直接写 border: 1px 在 iPhone 或 DPR≥2 的安卓机上必然变粗，这不是写法错误，是设备像素比（window.devicePixelRatio）导致的物理渲染结果：浏览器把 1 CSS 像素拉伸成 2 或 3 个物理像素，且不做降采样——所以“视觉 1px”必须绕过 border 的原生映射逻辑。
为什么 transform: scaleY(0.5) 必须配合 ::after 伪元素
缩放父元素会把字体、内边距、子元素全压小，布局直接崩。伪元素才是唯一不影响主内容流的“画布”：
- 父元素必须设
position: relative，否则::after的bottom: 0会相对于body定位 -
::after用height: 1px; background-color: #ccc，别用border-bottom: 1px——后者受盒模型干扰，缩放后边缘易虚、位置飘 -
transform-origin: 0 100%（即left bottom）必须显式写死，Safari 和部分安卓 WebView 对默认值解析不一致，不写就上浮露白 - 必须加
pointer-events: none，否则 UC/QQ 浏览器下伪元素会拦截点击，列表项点不中
四边 1px 边框怎么避免缩放偏移和露白
单边缩放简单，四边一起缩放容易错位或裁边，关键在尺寸撑开 + 锚点锁定：
-
::after设top: 0; left: 0; right: 0; bottom: 0;，再写width: 200%; height: 200%，然后transform: scale(0.5) -
transform-origin改为0 0（左上角），确保缩放锚点稳定，不随内容变化偏移 - 伪元素必须显式声明
box-sizing: border-box，否则默认content-box会让边框外扩，缩放后四角错位 - 父容器若有
overflow: hidden，缩放后伪元素可能被裁——因为缩放基于原始 200% 尺寸计算，坐标系未同步收缩，可加will-change: transform提升图层防裁切
DPR=3 设备（如 iPhone 14 Pro）下 scaleY(0.5) 仍显粗怎么办
scaleY(0.5) 在 DPR=3 下实际占 1.5 物理像素（1px × 2 × 0.5 × 3 = 3 → 渲染为 1.5px），不是整数像素，Safari 渲染仍会插值发虚：
立即学习“前端免费学习笔记（深入）”；
- 媒体查询兜底最稳妥：
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx)内覆盖transform: scaleY(0.333) - 但 Safari 对
scaleY(0.333)支持不稳定，更推荐 fallback 到box-shadow: 0 1px 1px -1px rgba(0,0,0,0.5)模拟下边框，或background: linear-gradient(to bottom, #ccc 50%, transparent 50%) - 别试图用 JS 注入 class——首屏渲染前 JS 还没执行，白屏期边框就错了
真正踩过坑的人知道：缩放后的伪元素如果漏掉 pointer-events
它不会报错，也不会警告，但真机上点击区域会莫名失效；更隐蔽的是，某些安卓 WebView 在 transform 后若没加 -webkit-transform 前缀，缩放直接不生效——iOS 12–15 对无前缀属性支持极不稳定。这些细节一漏，边框就断开、偏移或挡点击，调试时得真机连 Safari/Chrome DevTools 看渲染层。
