css：移动端实现1px、0.5px的细线

实现效果 在线体验: https://mouday.github.io/front-end-demo/1px.html

实现代码

  
    
      * {
        margin: 0;
        padding: 0;
      }

      body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

      .margin-top--20 {
        margin-top: 20px;
      }

      .box {
        width: 500px;
        height: 100px;
        box-sizing: border-box;
      }

      /* 1px border */
      .border--1 {
        border: 1px solid gray;
      }

      .border--0_5 {
        position: relative;
      }

      /* 通过伪元素实现 0.5px border */
      .border--0_5::after {
        position: absolute;
        content: "";
        /* 为了与原元素等大 */
        box-sizing: border-box;
        left: 0;
        top: 0;
        width: 200%;
        height: 200%;
        border: 1px solid gray;
        transform: scale(0.5);
        transform-origin: 0 0;
      }

      .line {
        width: 500px;
      }

      /* 实现 1px 细线 */
      .line--1 {
        height: 1px;
        background: #b3b4b8;
      }

      .line--0_5 {
        position: relative;
      }

      /* 通过伪元素实现 0.5px 细线 */
      .line--0_5::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 200%;
        height: 1px;
        background: #b3b4b8;
        transform: scale(0.5);
        transform-origin: 0 0;
      }

      /* dpr适配可以这样写 */
      @media (-webkit-min-device-pixel-ratio: 2) {
        .line--0_5::after {
          height: 1px;
          transform: scale(0.5);
          transform-origin: 0 0;
        }
      }

      @media (-webkit-min-device-pixel-ratio: 3) {
        .line--0_5::after {
          height: 1px;
          transform: scale(0.333);
          transform-origin: 0 0;
        }
      }
    

    1px border
    

    0.5px border
    

    1px line
    

    0.5px line
    
  

参考 为什么会存在 1px 问题？怎么解决？ web前端入门到实战：css3属性transform-origin讲解