如何画一条0.5px的线

html

    
1px粗线
    

    
方法一：transform
    

    
方法二：渐变
    

        #line {
            border-bottom: 1px solid black;
        }

方法一：tansform

        #line1 {
            border-bottom: 1px solid black;
            transform: scaleY(0.5);
        }

方法二：渐变

        #line2 {
            height: 1px;
            background: -webkit-linear-gradient(90deg, #000 50%, transparent 50%);
        }

注意：测试时谷歌浏览器有问题，1.角度和w3c标准对不上,2.pc端不显示

PC端：

移动端：

方法三：initial-scale

• 代码

• 截图

• 注意：移动端适用，字体也会变小，原理是css的1px在手机上并不是物理上的1像素，可能是2像素，initial-scale的值改为0.5之后就只代表1像素