0.5px线

在Mac/Windows上可以设置屏幕显示的分辨率，Mac默认为设备分辨率的一半，它的dpr = 2，即长和宽用2个像素表示1个像素

• 1**.直接设置height=0.5px**
  1. Chrome把0.5px四舍五入变成了1px，Chrome会把小于0.5px的当成0。
  1. 而firefox/safari能够画出半个像素的边，Firefox会把>=0.55px-->1px;Safari是把>=0.75px-->1p
  1. 手机上观察IOS的Chrome会画出0.5px的边，而安卓(5.0)原生浏览器是不行的。

2. <meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5" />
   注意：出图的时候按照2倍图出

 border-bottom: 1px solid black;

4. transform

 border-bottom: 1px solid black;
 transform: scaleY(0.5);
  transform-origin: 50% 100%; //虚变实线
 //其中是长度缩短为原来0.5倍，X的话就是宽度缩短

4.box-shadow

 height: 1px;
 background: none;
  /* 右，下，虚化程度（0不虚化），颜色 */
 box-shadow: 0 0.5px 0 #000;

5. 设置background为一个svg文件，这个svg单独拷出来是这样的：

由于svg的描边等属性的1px是物理像素的1px，相当于高清屏的0.5px
stroke表示描边颜色，默认描边宽度stroke-width="1"，
 background: none;
 height: 1px;
 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>");

参考：https://zhuanlan.zhihu.com/p/34908005