Retina 屏下的 1px 边框“变胖”？这 3 招让毛边彻底消失

做移动端 H5 开发时，最让人头秃的瞬间莫过于：UI 切图明明标注的是标准 1px 细线，可到了 iPhone 或高清安卓机上，那条线却变得模糊又粗壮，甚至像加了层马赛克。设计师追着问为什么没还原稿，其实这不是你的代码写错了，而是物理像素与逻辑像素的“代沟”。

现在的移动设备普遍采用高密度屏幕（Retina），比如 iPhone 的 DPR（Device Pixel Ratio）通常是 2 或 3。这意味着一个 CSS 逻辑像素，实际上对应了屏幕上 2x2 或 3x3 的物理像素点。当你写 border: 1px solid #ccc 时，浏览器会默认占用 2 个物理像素宽度，于是边框看起来就“肿”了一圈。要解决这个视觉误差，核心思路只有一条：利用缩放技术，把实际渲染出来的 2px 缩回 1px。

伪元素配合 transform 缩放

这是兼容性最好、应用最广的方案。基本逻辑是创建一个高度为 2px 的伪元素，然后通过 transform: scaleY(0.5) 把它压扁，视觉上就只剩 1px 了。

具体实现时，父容器需要设置为 position: relative，然后在内部新建 ::after 伪元素。最关键的一步是设置 transform-origin: 0 0。如果不指定这个属性，默认的居中缩放会让线条向中心收缩，导致位置偏移。通过以下代码结构，可以精确控制边框位置：

.border-box { position: relative; }
.border-box::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 2px; /* 初始设为两倍 */
    transform: scaleY(0.5);   /* 压缩一半 */
    background-color: #eee;
}

这种方式灵活度高，能轻松处理四周边框或多重边框。唯一的注意点在于，如果容器内容非常多，这种缩放有时会影响子元素的点击区域判定，建议配合 pointer-events: none 使用，确保交互不受影响。

线性渐变模拟边框

如果你只需要处理分割线或者单侧边框，没必要搞出整个伪元素结构，使用 linear-gradient 背景更轻量。原理是利用背景色画出一条细线，并控制其尺寸刚好占满容器的一半或全宽。

.border-line {
    background-image: linear-gradient(to bottom, transparent 50%, #eee 50%);
    background-size: 100% 1px; /* 关键：设定实际高度为 1px */
    padding-bottom: 1px;       /* 预留空间 */
}

这段代码的优势在于代码量少，且不会产生额外的 DOM 节点。不过它也有局限，不适合用来画复杂的圆角矩形边框，通常用于列表项之间的分割线。另外记得设置 background-repeat: no-repeat，防止线条意外重复。

SVG 矢量图兜底

当项目对清晰度要求极高，或者需要处理圆角、不规则形状的细线时，前两种方案可能会露怯。这时候，内联 SVG 是最好的选择。SVG 本身就是基于矢量的，在任何分辨率下都能保持边缘锐利，不会模糊。

你可以将 1px 高度的 SVG 路径转换为 Base64 字符串，直接作为 background-image。虽然前期配置稍微麻烦，但一旦封装好组件，后续调用只需一行代码。这种方法在 iOS Safari 和 Chrome 中表现极为稳定，不会出现某些老机型缩放后的锯齿问题。对于追求极致体验的项目，花时间去封装这套方案绝对值回票价。

自动化构建才是王道

当然，以上方案如果手动复制粘贴到每个项目里，维护成本太高。现代前端工程化早已提供了更优雅的解法。在 Vue 或 React 项目中，推荐配置 PostCSS 插件。

通过安装 postcss-px-to-viewport 或专门的 postcss-1px-multi-plugin，可以在编译阶段自动识别带有 border: 1px 的规则，并将其替换为上述的 transform 方案或 SVG 方案。这样你在写代码时无需关心底层细节，专注于业务逻辑即可。既保证了视觉统一，又提升了团队协作效率。

搞定 1px 问题，本质上是在处理人与设备的适配关系。方案没有绝对的好坏，只有是否适合当前场景。简单的列表分割用渐变，复杂的卡片边框用伪元素，高性能需求的用 SVG。别让这些细节上的“毛边”，拉低了整个产品的精致度。