0.5px的线

实际上，在大多数常见的浏览器中，是无法直接画出精确 0.5 像素宽度的线的，因为浏览器的渲染引擎通常会将线条的宽度四舍五入到最接近的整数像素值。这是由于大多数屏幕的物理像素都是整数。

以下提供 4 种方式去实现

第一种： transform 缩放 scale

但在 chrome 上会虚化，所以加上 transform-origin: 50% 100%;

.scale-half {
  height: 1px;
  transform: scaleY(0.5);
  transform-origin: 50% 100%;
}

第二种： 渐变 linear-gradient， 不完美，虚化了。

.gradient {
  height: 1px;
  background: linear-gradient(0deg, #fff, #000);
}

第三种： 阴影 boxshadow， Safari 不支持

.boxshadow {
  height: 1px;
  background: none;
  box-shadow: 0 0.5px 0 #000;
}

第四种： SVG, firefox 在第一种不适用，stroke 要用 black 这种命名颜色

.svg {
  background: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'><line x1='0' y1='0' x2='100%' y2='0' stroke='#000'></line></svg>");
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzFweCc+PGxpbmUgeDE9JzAnIHkxPScwJyB4Mj0nMTAwJScgeTI9JzAnIHN0cm9rZT0nIzAwMCc+PC9saW5lPjwvc3ZnPg==');
}

	直接设置	transform	box-shadow	SVG
ios	✅	✅	✖️	✅
安卓	✖️	✅	✅	✅
Chrome	✖️	✅	✅	✅
FIrefox	✅	✅	✖️	✅
Safari	✅	✅	✖️	✅