那天验收产品的客户说这个应用某些地方的边框太粗了，需要调好看些，但是前端开发小伙伴说明明我已经写了1px了，怎么看起来粗。 今天这篇文章就来解释下这个问题。

在移动端开发中，1px 边框问题主要源于设备像素密度的不同。CSS 中的 1px 并不总是转换为设备上的物理 1px，尤其是在高 DPI 屏幕上，这会导致边框看起来比预期要粗。

1. 使用 0.5px 边框

在设备像素比为 2 或更高时，可以有条件地应用 0.5px 边框。

.border {
  border: 1px solid #bbb;
}
@media screen and (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 2dppx) {
  .border {
    border-width: 0.5px;
  }
}

这种方法简单，但需要确保设备支持 0.5px 边框。

2. 使用 border-image

使用专门制作的边框图像来实现 1px 边框效果。

.border-bottom-1px {
  border-width: 0 0 1px 0;
  border-image: url(linenew.png) 0 0 2 0 stretch;
  -webkit-border-image: url(linenew.png) 0 0 2 0 stretch;
}

此方法需要准备相应的边框图像。

3. 使用 background-image

与 border-image 类似，利用预先准备的图像作为边框。

.border {
  background-image: url(border-image.png);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: bottom;
}

这种方法的优点是可以自定义边框样式，但需要更改颜色时需替换图像。

4. 使用伪元素和 transform

通过伪元素和 transform: scale() 来模拟更细的边框。

.box {
  position: relative;
}
.box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #000;
  transform: scale(0.5);
  transform-origin: 0 0;
}

这种方法适用于需要精确控制边框宽度的场景。

5. 使用 box-shadow

利用 CSS 阴影来创建边框效果。

.border {
  box-shadow: 0 1px 0 #000;
}

这种方法简单且易于实现，但可能会影响元素的布局。

6. 使用视口单位和 rem

调整视口的 rem 基值，以在不同设备上实现一致的 1px 边框。

html {
  font-size: 16px; /* 基准值，根据设备屏幕宽度调整 */
}
.border {
  border: 0.05rem solid #000; /* 0.05rem 约等于 1px */
}

此方法适用于需要适应不同屏幕尺寸的项目。

7. 使用 SVG

直接使用 SVG 绘制 1px 线条作为边框。

<svg width="100%" height="1px" viewBox="0 0 100 1" preserveAspectRatio="none">
  <line x1="0" y1="0" x2="100" y2="0" stroke="#000" stroke-width="1" />
</svg>

这种方法可以精确控制边框的宽度和样式，但需要嵌入 SVG 代码。

创作不易，如果这篇文章对你有用，欢迎点赞关注加评论哦

小伙伴们在工作中还遇到过其他应用场景吗，欢迎评论区留言讨论哦。