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: ;
     left: ;
     box-shadow:    1px #;
     transform-origin:  bottom;
     transform: scaleY(.) translateZ();
 }
 @media (min-resolution: 2dppx) {
     span.onepixel.shadow::after {
       box-shadow:    .5px #;
     }
  }
 @media (min-resolution: 3dppx) {
     span.onepixel.shadow::after {
       box-shadow:    .333333px #;
     }
 }
 </style>
 <span class="onepixel shadow"></span>

办公资源网址导航 https://www.wode007.com

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:  ;
   }
   span.onepixel.top::before {
     width: %;
     top: ; left: ;
     border-top: 1px solid #;
     transform-origin:  top;
   }
   @media (min-resolution: 2dppx) {
     span.onepixel.top::before {
       width: %;
       transform: scale(.) translateZ();
     }
   }
   @media (min-resolution: 3dppx) {
     span.onepixel.top::before {
       width: %;
       transform: scale(.) translateZ();
     }
   }
 </style>

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