画一条0.5px的线

        在正式开始画之前，先来简单说一下像素（Pixel,PX）的概念：

像素（Pixel,PX）：Picture Element（图形元素）的简称，屏幕颜色与强度的一个单位。

        举个例子：在一个1080p的屏幕上，它的像素数量是1920 * 1080，即横边有1920个像素，而竖边为1080个。一个像素就是一个单位色块，是由rgba四个通道混合而成。像素其实是能够定址和分配颜色值的最小单位。

         这里你可能会想：既然1px已经是一个单位色块了，那么为什么还会出现0.5px呢？理论上px的最小单位是1，但是在不同地方出现的 "px" ，不一定是同一个东西：

设备像素

设备像素（Device Pixels,DP）：又称物理像素，是设备能控制显示的最小单位，可以把它看做显示器上的一个点。

        上面说的 1920x1080像素分辨率，其实就是用的设备像素单位。设备像素表示屏幕上可以铺多少个点点，而不是一个绝对长度单位（例如in,mm），因为不同设备的dp并不相同。那这和我们原来的px又有什么关系呢？ 

设备像素比

        设备上的1px和CSS设置的1px，有些时候并不相同。

设备像素比(devicePixelRatio,DPR)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到:
设备像素比=物理像素1设备独立像素//在某一方向上，x方向或者y方向

        比如说在Retina屏的iphone上，DPR为2，1个css像素相当于2个物理像素，这个时候，你想画一条1px的线，设置CSS属性为1px，就会发现线条好像比预期要粗一些，这就是因为设计师要的1px是一个物理像素，也就是所能设计出来的最细的线，而css中的1px是一个点，dpr为2的话，那么就是两个物理像素了，这就不是设计师要的细线了。

        那么问题来了：怎么在高清屏上画一条0.5px（相当于高清屏物理像素的1px）的线呢？

先试试看直接设置0.5px：

<style>
        .line {
            width: 300px;
            background-color: #000;
        }
        .fine {
            height: 0.5px;
        }
        .coarse {
           height: 1px;
        }
</style>

<p>0.5px</p>
<div class="line fine"></div>
<p>1px</p>
<div class="line coarse"></div>

Chrome会把小于0.5px的当成0，而Firefox会把不小于0.55px当成1px，Safari是把不小于0.75px当成1px

那么使用scale缩放呢：

<style>
.scale {
    height: 1px;
    transform: scaleY(0.5);
}
</style>
<p>1px + scaleY(0.5)</p>
<div class="line scale"></div>

Chrome/Safari中的线条都变虚了，只有在Firefox看起来是实的，而且还很细，效果和直接设置0.5px一样 

                怎么让虚线变实呢，加上transform-origin: 50% 100%就可以了：

        视口缩放不会影响rem元素大小，所以说移动端直接使用rem和直接使用0.5px的方案是一样的。

使用线性渐变linear-gradient也可以实现0.5px：

<style>
.gradient {
    height: 1px;
    background: linear-gradient(0deg, #fff, #000);
}
</style>
<p>linear-gradient(0deg, #fff, #000)</p>
<!-- linear-gradient(0deg, #fff, #000)的意思是：渐变的角度从下往上，从白色(#fff)线性渐变到黑色(#000) -->
<div class="line gradient"></div>

通过虚化线条，让人觉得变细了

 设置box-shadow参数同样可以画出0.5px的线：

<style>
.boxshadow {
    height: 1px;
    background: none;
    box-shadow: 0 0.5px 0 #000;
    /* 设置box-shadow的第二个参数为0.5px，表示阴影垂直方向的偏移为0.5px */
}
</style>
<p>box-shadow: 0 0.5px 0 #000</p>
<div class="line boxshadow"></div>

Safari不支持小于1px的boxshadow所以没有显示内容

         以上就是常见的画0.5px线的方法了。