border-image方案用渐变“画”1物理像素边框，需slice=1且配合transparent边框；transform缩放伪元素兼容性最佳，须设transform-origin和精确scale值；0.5px边框因android webview不支持而不可靠。
直接用 border-image 模拟 1px 物理像素边框
这个方案本质是绕过 border 的像素映射逻辑，用渐变或图片“画”出真正只占 1 物理像素的线。它不依赖设备像素比（DPR）检测，也不缩放内容，适合单边边框场景。
-
border-image的slice值必须设为1，否则渐变会被拉伸失真；写法是border-image: linear-gradient(to bottom, #000, #000) 1 - 必须配合
border: 1px solid transparent，否则边框宽度无法被border-image接管 - 只适用于纯色、直线、单边（如
border-bottom），多边或圆角时需额外处理伪元素 - 在 iOS Safari 和 Chrome Android 上表现稳定，但老版 UC 或 QQ 浏览器可能 fallback 到默认边框
用 transform: scaleY() 缩放伪元素实现上下边框
这是目前兼容性最好、可控性最强的方案，核心是把边框“画”在 ::after 上，再按 DPR 缩放。关键不是缩放整个元素，而是精准控制伪元素的渲染尺寸。
- 必须设置
transform-origin: bottom（下边框）或top（上边框），否则缩放后位置偏移 - DPR=2 时用
scaleY(0.5)，DPR=3 时用scaleY(0.333333)，不能四舍五入成0.33，否则安卓 WebView 渲染模糊 - 伪元素的
height要设为1px，不是2px再缩放——起点必须是 1 CSS 像素 - 媒体查询要覆盖
(-webkit-min-device-pixel-ratio: 2)和(min-resolution: 192dpi)，后者兼容 Firefox Android
为什么不用 0.5px 直接写？
看似最简单，但实际落地会踩坑：iOS 10+ 支持 border: 0.5px，但 Android 大部分 WebView（包括微信内置）会直接忽略，渲染成无边框；Chrome Desktop 开发者工具里显示正常，真机调试才暴露问题。
- 不能依赖
devicePixelRatio动态写内联样式，因为 CSSOM 注入时机晚于首次渲染，首屏仍会闪现粗边框 - 即使 JS 检测到 DPR=2 后加 class，也要注意 class 切换引发的重排，可能造成布局抖动
- 若项目已用 PostCSS，可借助
postcss-pxtorem插件 + 自定义单位转换规则，但需统一设计稿基准（如 750px 宽），否则缩放比例错乱
缩放方案中容易被忽略的 box-sizing
当伪元素需要模拟四边边框（比如用 scale(0.5) 缩放整个框），box-sizing: border-box 是强制项。否则 1px 边框缩放后，宽高计算会把边框撑开，导致内容区域偏移。
- 缺了
box-sizing: border-box，width: 200%+border: 1px缩放后，实际占据宽度是200% + 2px，超出父容器 - 所有带
transform: scale()的伪元素，只要涉及border或需精确贴边，都应显式声明box-sizing - 不要依赖全局重置，不同组件库可能覆盖该属性，宁可在局部 class 中重复写一遍
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
