画一条0.5px的线

这里我总结了3种方法。

1.直接设置0.5px

<style> 
        .hr {
            width: 200px;
            background-color: black;
        }
        .solid {
            height: 0.5px;
        }
        .solid1 {
            height: 1px;

        }
</style>
    <p>0.5px</p>
    <div class="hr solid"></div>
    <p>1px</p>
    <div class="hr solid1"></div>

效果展示如下

2.采用transform: scaleY(0.5); 

缩放使Y方向为原来的一半，就得到0.5px

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


 <p>1px + scaleY(0.5)</p>
    <div class="hr scale-half"></div>

           效果如下

 

 3.可以用box-shadow设置阴影从#000到#fff虽然高度是1px，但是视觉效果看起来是0.5px

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

 <p>box-shadow: 0 0.5px 0 #000</p>
    <div class="hr boxshadow"></div>

 效果如下

 其中会有兼容性问题，只适用于1E8以上版本，下面是IE8执行结果