直接写border: 1px在dpr≥2设备上必然变粗，根本解法是伪元素+transform: scale()；因0.5px等非整数边框兼容性差、无法动态适配dpr，而伪元素方案通过height: 1px+scaley(0.5)+transform-origin精准控制物理像素渲染。
直接写 border: 1px 在 iPhone、iPad Pro 等设备上必然变粗，这不是代码写错了，是 window.devicePixelRatio（DPR）在起作用——DPR=2 时，1px CSS 像素占 2 物理像素；DPR=3 时占 3 物理像素。想“看起来是 1px”，必须绕过浏览器对 border 的默认渲染逻辑。
为什么 border: 0.5px 大部分场景不能用
看似最直觉的解法，实际踩坑最多：iOS 8+ 支持 0.5px，但旧版 Safari、多数安卓 WebView 会直接忽略或向上取整为 1px（即仍渲染为 2 物理像素）。更麻烦的是，0.333px 在 DPR=3 设备上根本不会被解析，CSS 解析器直接丢弃该声明。
- 媒体查询
@media (-webkit-min-device-pixel-ratio: 2)只能兜底 DPR≥2，无法区分 DPR=2 和 DPR=3 的渲染差异 - 即使 JS 检测到
devicePixelRatio === 3，硬写border-width: 0.333px仍大概率失效 - 所有非整数
border-width值，在 flex/grid 容器中可能触发重排或尺寸抖动
::after + transform: scale() 的可靠写法
这是目前兼容性最好、可控性最强的纯 CSS 方案，核心不是“缩放边框”，而是“画一个 2px 高的条，再压缩到视觉 1px”。关键不在缩放值，而在锚点和盒模型约束。
- 父元素必须设
position: relative，否则伪元素定位失效 - 伪元素用
height: 1px+background-color，别用border-bottom: 1px——后者受box-sizing影响，缩放后边缘易模糊 -
transform-origin必须显式写成left bottom（单边下边框）或0 0（四边），否则缩放中心偏移导致位置错位 - 加
-webkit-transform和-webkit-transform-origin前缀，iOS 12–15 对无前缀支持不稳定 - 四边边框时，伪元素需设
width: 200%; height: 200%，再transform: scale(0.5)，并配合box-sizing: border-box，否则边框会外扩或裁切
圆角、滚动容器和 overflow: hidden 下的陷阱
伪元素方案在复杂布局里容易翻车，不是缩放逻辑错了，而是渲染坐标系没对齐。
- 圆角边框：伪元素缩放后，
border-radius会被拉伸变形，必须把border-radius写在父元素上，伪元素只负责边框色块 - 滚动容器中边框消失：伪元素
position: absolute后，若父容器有overflow: hidden，缩放前的 200% 尺寸可能被裁掉——解决办法是给父容器加transform: translateZ(0)或will-change: transform强制图层提升 - 伪元素遮挡点击：务必加
pointer-events: none，否则会拦截用户操作 - 颜色半透明叠加：多个伪元素叠在一起时，
rgba(0,0,0,0.1)会因叠加变深，改用单层伪元素 +background: linear-gradient()更稳妥
真正难的不是写出一个能跑的 scale(0.5)，而是判断什么时候该用伪元素、什么时候该切到 box-shadow 或 linear-gradient——比如列表项分隔线用伪元素，卡片圆角边框用渐变，悬浮态边框动画用 box-shadow。DPR 是个常量，但 UI 场景永远在变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
