如何画一条0.5px的线

html

    <h1>1px粗线</h1>
    <div id="line"></div>
    <h4>方法一：transform</h4>
    <div id="line1"></div>
    <h4>方法二：渐变</h4>
    <div id="line2"></div>

        #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

• 代码

    <meta name="viewport" content="width=device-width, initial-scale=0.5">
    <style>
        #line3 {
            border-bottom: 1px solid #000;
        }
    </style>

• 截图

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