如何画一条0.5px的线

方法一、移动端，采用meta viewport的方式

这样子就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px。

方法二、采用 transform: scale()的方式

transform: scale(0.5,0.5);

方法三、使用boxshadow

box-shadow: 0 0.5px 0 #000

设置box-shadow的第二个参数为0.5px，表示阴影垂直方向的偏移为0.5px。

方法四、使用background-image结合SVG的方式

使用svg的line元素画线，stroke表示描边颜色，默认描边宽度stroke-width=“1”，由于svg的描边等属性的1px是物理像素的1px，相当于高清屏的0.5px，
这样在Chrome上能很好的显示，但在firefox挂了，究其原因是因为firefox的background-image如果是svg的话只支持命名的颜色，如"black"、"red"等，如果把上面代码的svg里面的#000改成black的话就可以显示出来，但是这样就很不灵活了。因此，只能把svg转成base64的形式，最终如下：

.hr.svg {
    background: url("data:image/svg+xml;utf-8,
                    ");
    //使用base64来使得支持firefox
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzFweCc+PGxpbmUgeDE9JzAnIHkxPScwJyB4Mj0nMTAwJScgeTI9JzAnIHN0cm9rZT0nIzAwMCc+PC9saW5lPjwvc3ZnPg==");
}

参考地址：https://blog.csdn.net/yiyueqinghui/article/details/121569181