如何通过CSS结合transform的scale实现单像素边框的精确缩放？
- 内容介绍
- 文章标签
- 相关推荐
本文共计779个文字，预计阅读时间需要4分钟。
在视网浏览器（DPR+2）上，设置元素边框为1px实际渲染为2px或3px，看起来更明显。使用`transform: scale();`来缩放伪元素是最稳定、兼容性最好的方案，无需JS，不依赖viewport修改，也不局限于border-image的图片资源。
为什么不能直接写 0.5px？
虽然部分 Safari 和 Chrome 支持 border-width: 0.5px，但 Android WebView、旧版 iOS、微信内置浏览器等仍会向上取整为 1px；更关键的是，0.5px 在 DPR=3 设备（如 iPhone 14 Pro）上又不够细——它实际是 1.5px 物理像素，依然偏粗。所以硬写小数 px 是靠不住的。
伪元素 + scale 的标准写法
核心思路：创建一个 1px 高/宽的伪元素，再用 transform: scale() 沿对应轴向压缩，同时用 transform-origin 控制缩放锚点，避免位移错位。
常见错误现象：边框位置偏移、上下/左右不对齐、圆角被拉伸变形、缩放后模糊。
本文共计779个文字，预计阅读时间需要4分钟。
在视网浏览器（DPR+2）上，设置元素边框为1px实际渲染为2px或3px，看起来更明显。使用`transform: scale();`来缩放伪元素是最稳定、兼容性最好的方案，无需JS，不依赖viewport修改，也不局限于border-image的图片资源。
为什么不能直接写 0.5px？
虽然部分 Safari 和 Chrome 支持 border-width: 0.5px，但 Android WebView、旧版 iOS、微信内置浏览器等仍会向上取整为 1px；更关键的是，0.5px 在 DPR=3 设备（如 iPhone 14 Pro）上又不够细——它实际是 1.5px 物理像素，依然偏粗。所以硬写小数 px 是靠不住的。
伪元素 + scale 的标准写法
核心思路：创建一个 1px 高/宽的伪元素，再用 transform: scale() 沿对应轴向压缩，同时用 transform-origin 控制缩放锚点，避免位移错位。
常见错误现象：边框位置偏移、上下/左右不对齐、圆角被拉伸变形、缩放后模糊。