怎么实现移动端的边框0.5px？

在移动端实现 0.5px 的边框，由于屏幕像素密度的限制，直接设置 border: 0.5px solid #000; 并不会生效。需要一些技巧来模拟这种效果：

以下几种方法比较常用：

1. 使用 transform: scale() 缩放:

这是最常用的方法，原理是创建一个1px的边框，然后将其缩放为0.5px。

.border-05 {
  position: relative;
}

.border-05::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%; /* 宽度的两倍 */
  height: 200%; /* 高度的两倍 */
  border: 1px solid #000;
  transform-origin: top left; /* 从左上角缩放 */
  transform: scale(0.5);
  box-sizing: border-box; /* 包含边框 */
}

/*  如果只需要某一边有边框，可以这样：*/
.border-bottom-05::before {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    transform-origin: bottom left;
}

• 优点：兼容性好，实现简单。
• 缺点：在一些情况下，由于缩放可能会导致边框颜色变浅，特别是在白色背景上。

2. 使用 linear-gradient() 线性渐变:

利用线性渐变创建一个伪边框。

.border-05 {
  background-image: linear-gradient(to bottom, #000 0.5px, transparent 0.5px);
}

/*  如果只需要某一边有边框，可以调整渐变方向：*/
.border-bottom-05 {
    background-image: linear-gradient(to bottom, transparent calc(100% - 0.5px), #000 calc(100% - 0.5px), #000 100%);
}

• 优点：颜色不会变浅，控制更精细。
• 缺点：对于需要四条边框的情况，代码会比较复杂。

3. 使用 SVG:

使用 SVG 可以精确地绘制 0.5px 的线条。

<svg width="100" height="100">
  <rect x="0" y="0" width="100" height="100" stroke="#000" stroke-width="0.5"/>
</svg>

• 优点：精确度高。
• 缺点：相对来说比较麻烦，需要额外引入 SVG。

4. 使用伪元素 + box-shadow:

利用 box-shadow 来模拟 0.5px 的边框。

.border-05 {
  position: relative;
}

.border-05:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 0 0.5px #000; /* 内阴影模拟边框 */
}

• 优点：实现简单，颜色不会变浅。
• 缺点：只适用于内边框。

选择哪种方法取决于具体的需求和场景：

• 对于简单的单一边框或只需要兼容性，transform: scale() 是最方便的选择。
• 对于需要精确颜色和多边框的情况，linear-gradient() 更好。
• 对于需要更精细的控制或复杂图形，SVG 是最佳选择。
• 如果只需要内边框，box-shadow 也是一个不错的选择。

记住要根据实际情况进行调整和测试，选择最适合你的方案。 尤其要注意高清屏下 transform: scale() 方法可能导致边框模糊，可以尝试配合 background-clip 使用。