最稳解法是::after+transform:scaley(0.5)，因dpr导致border:1px物理像素超标；需设position:relative、height:1px+background、transform-origin:0 100%、pointer-events:none，并兼容ios前缀及dpr动态适配。
::after 伪元素 + transform: scaleY(0.5) 是目前最稳的解法，不是“能用”，而是“必须这么写才不偏、不糊、不挡点击”。
为什么不能直接写 border: 1px
这不是写错了，是设备像素比（DPR）在起作用：window.devicePixelRatio 为 2 时，1 个 CSS 像素会映射到 2 个物理像素，border: 1px 就真画出 2 物理像素宽的线；DPR=3 时更糟——它不会自动降采样，只是硬铺满。设计师要的“视觉 1px”，浏览器默认给不了。
::after + scaleY(0.5) 的最小可靠写法
只画底部边框是最常用场景，但错一个属性就飘：
- 父元素必须设
position: relative，否则::after会脱离上下文定位到body -
::after要用height: 1px+background-color，别用border-bottom: 1px——后者缩放后边缘发虚，且受盒模型干扰 -
transform-origin必须显式写成0 100%（或left bottom），锚点落在左下角，配合bottom: 0才能严丝合缝贴底 - 务必加
pointer-events: none，UC、QQ 浏览器下不加会拦截点击，列表项点不中 - iOS 12–15 需补前缀：
-webkit-transform: scaleY(0.5)和-webkit-transform-origin: left bottom
示例：
.line-bottom {
position: relative;
}
.line-bottom::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #ddd;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: left bottom;
transform-origin: 0 100%;
pointer-events: none;
}
四边边框怎么写才不崩
单边靠 scaleY/scaleX，四边必须整体缩放，否则盒模型和定位全乱：
- 伪元素尺寸设为
width: 200%、height: 200%，再画border: 1px solid #000 - 整体
transform: scale(0.5)，缩放锚点必须是transform-origin: 0 0（左上角） - 伪元素必须加
box-sizing: border-box，否则默认content-box会让边框溢出 - 父容器若有
overflow: hidden，缩放后伪元素可能被裁——will-change: transform可提升图层防裁切
DPR=3 设备上还是粗？得动态适配
硬写 scaleY(0.5) 只对 DPR=2 有效；DPR=3 时，缩放后仍占 1.5 物理像素（2 × 0.5 × 3 = 3 → 实际渲染 1.5px），肉眼可辨：
- 用 JS 获取
window.devicePixelRatio，计算缩放比：1 / dpr（如 0.333） - 或用媒体查询兜底：
@media (-webkit-min-device-pixel-ratio: 3) { .border-1px::after { transform: scaleY(0.333); } } - 注意：Safari 对子像素缩放支持不稳定，DPR=3 场景建议改用
box-shadow或linear-gradient替代
真正麻烦的不是写法本身，而是缩放后伪元素是否被裁、是否挡点击、是否在旧 WebView 里失效——这些都得真机连着调试器看，模拟器测不出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
