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

原创

彭世瑜 2022-09-03 00:31:22 ©著作权

©著作权归作者所有：来自51CTO博客作者彭世瑜的原创作品，请联系作者获取转载授权，否则将追究法律责任

实现效果

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

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

实现代码

<body>
    <style>* {
        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;
        }
      }</style>

    <h1>1px border</h1>
    <div class="box border--1"></div>

    <h1 class="margin-top--20">0.5px border</h1>
    <div class="box border--0_5"></div>

    <h1 class="margin-top--20">1px line</h1>
    <div class="line line--1"></div>

    <h1 class="margin-top--20">0.5px line</h1>
    <div class="line line--0_5"></div>
  </body>