最稳解法是伪元素+transform:scaley(0.5)，必须配齐position:relative、transform-origin:0 100%、pointer-events:none三要素，否则边框偏位或点击失效。
直接写 border: 1px 在高分屏（DPR ≥ 2）下必然出现视觉偏差——不是代码错了，是浏览器把 1 CSS 像素映射到 2 或 3 个物理像素后，渲染坐标没对齐，导致边框“浮起来”或“沉下去”半像素。伪元素 + transform: scaleY(0.5) 是目前最可控的解法，但必须配齐定位锚点、缩放原点和交互穿透三要素。
为什么 transform-origin: 0 100% 不可省略
缩放不是“变细”，而是“画一条 2px 高的线再压扁”。如果没指定锚点，scaleY(0.5) 默认以中心为原点，底部边框就会向上偏移 0.5px，露出父容器底色；Safari 和部分安卓 WebView 对 bottom 关键词解析不稳定，显式写 0 100%（左下角）才能确保所有设备都从底线开始压缩：
-
transform-origin: 0 100%→ 底部边框稳贴 bottom -
transform-origin: 0 0→ 四边边框时用左上角锚点，避免缩放后错位 - 不写或写
bottom→ iOS 14–15、UC 浏览器常见上浮露白
浮动/绝对定位元素的 position: relative 必须加在父级
伪元素 ::after 的 bottom: 0 是相对于最近的 position: relative 祖先计算的。如果父元素是 float: left 或 position: absolute 却没设 relative，伪元素会脱出上下文，定位到 body 底部，边框直接消失：
- 浮动卡片、网格项、弹窗遮罩层，都必须在直接父容器上加
position: relative - 嵌套绝对定位时，只给最外层加不够，每一级需要伪元素的容器都得独立设
relative - 用
will-change: transform可防 overflow: hidden 裁切，但不能替代定位上下文
pointer-events: none 漏掉就等于按钮点不中
伪元素盖在内容上方，哪怕透明，也会拦截点击事件。这不是样式问题，是渲染层逻辑：UC、QQ、部分安卓 WebView 默认把伪元素当作可交互图层。现象是列表项点击无响应、开关无法 toggle、input 失去焦点：
- 所有使用
::before或::after画边框的场景，都必须加pointer-events: none - 加在伪元素规则里，不是父元素；加了
z-index: -1也无效，必须靠pointer-events - 若需伪元素响应事件（如拖拽手柄），则不能用此方案，应换
box-shadow或渐变
DPR=3 设备下 scaleY(0.5) 仍发虚怎么办
scaleY(0.5) 在 DPR=3 下实际渲染为 1.5 物理像素（1px × 2 × 0.5 × 3），Safari 插值模糊不可避免。硬写 scaleY(0.333) 渲染不稳定，更推荐媒体查询兜底：
- @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) { .border-1px::after { transform: scaleY(0.333); } }
- 但 Safari 对非整数缩放支持差，稳妥做法是 fallback 到
box-shadow: 0 1px 1px -1px rgba(0,0,0,0.5)模拟下边框 - 圆角容器里别用渐变，
background: linear-gradient(to bottom, #ccc 50%, transparent 50%)无法自然衔接 border-radius
真正容易被忽略的是：缩放后的伪元素尺寸（如 width: 200%）在 overflow: hidden 容器里会被裁切，不是 bug，是坐标系未同步收缩——加 will-change: transform 或 transform: translateZ(0) 强制图层提升，比调 z-index 有效得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
