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

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

1、利用box-shadow + transform

 1 <style>
 2 span.onepixel{
 3     width: 300px;position: relative;top:50px;
 4 }
 5 span.onepixel::after {
 6     content: '';
 7     width: 300px;
 8     position: absolute;
 9     bottom: 0; 
10     left: 0;
11     box-shadow: 0 0 0 1px #666;
12     transform-origin: 0 bottom;
13     transform: scaleY(.5) translateZ(0);
14 }
15 @media (min-resolution: 2dppx) {
16     span.onepixel.shadow::after {
17       box-shadow: 0 0 0 .5px #666;
18     }
19  }
20 @media (min-resolution: 3dppx) {
21     span.onepixel.shadow::after {
22       box-shadow: 0 0 0 .333333px #666;
23     }
24 }
25 </style>
26 <span class="onepixel shadow"></span>

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

2、利用border + 伪元素 + transform

 1 <style>
 2   span.onepixel {
 3     display: block;
 4     width: 300px;
 5     position: relative;
 6   }
 7   span.onepixel::before, span.onepixel::after {
 8     content: "";
 9     display: block;
10     position: absolute;
11     transform-origin: 0 0;
12   }
13   span.onepixel.top::before {
14     width: 100%;
15     top: 0; left: 0;
16     border-top: 1px solid #666;
17     transform-origin: 0 top;
18   }
19   @media (min-resolution: 2dppx) {
20     span.onepixel.top::before {
21       width: 200%;
22       transform: scale(.5) translateZ(0);
23     }
24   }
25   @media (min-resolution: 3dppx) {
26     span.onepixel.top::before {
27       width: 300%;
28       transform: scale(.333333) translateZ(0);
29     }
30   }
31 </style>
32 
33 <span class="onepixel top"></span>