css实现1px 像素线条_解决移动端1px线条的显示方式

使用CSS 绘制出 1px 的边框，在移动端上渲染的效果会出现不同，部分手机发现1px 线条变胖了，这篇文章整理2种方式实现1px 像素线条。

1、利用box-shadow + transform 

<style>
span.onepixel{
    width: 300px;position: relative;top:50px;
}
span.onepixel::after {
    content: '';
    width: 300px;
    position: absolute;
    bottom: 0; 
    left: 0;
    box-shadow: 0 0 0 1px #666;
    transform-origin: 0 bottom;
    transform: scaleY(.5) translateZ(0);
}
@media (min-resolution: 2dppx) {
    span.onepixel.shadow::after {
      box-shadow: 0 0 0 .5px #666;
    }
 }
@media (min-resolution: 3dppx) {
    span.onepixel.shadow::after {
      box-shadow: 0 0 0 .333333px #666;
    }
}
</style>
<span class="onepixel shadow"></span>

2、利用border + 伪元素 + transform

<style>
  span.onepixel {
    display: block;
    width: 300px;
    position: relative;
  }
  span.onepixel::before, span.onepixel::after {
    content: "";
    display: block;
    position: absolute;
    transform-origin: 0 0;
  }
  span.onepixel.top::before {
    width: 100%;
    top: 0; left: 0;
    border-top: 1px solid #666;
    transform-origin: 0 top;
  }
  @media (min-resolution: 2dppx) {
    span.onepixel.top::before {
      width: 200%;
      transform: scale(.5) translateZ(0);
    }
  }
  @media (min-resolution: 3dppx) {
    span.onepixel.top::before {
      width: 300%;
      transform: scale(.333333) translateZ(0);
    }
  }
</style>

<span class="onepixel top"></span>

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_597