移动端半像素 0.5PX 边框实现。

Posted 2020-09-28 Evo1uti0n

 1 /*半像素*/
 2 .halfpxline_after, .halfpxline_before {
 3   position: relative;
 4 }
 5 
 6 .halfpxline_after:after, .halfpxline_before:before {
 7   content: ‘‘;
 8   display: block;
 9   position: absolute;
10   left: 0;
11   right: 0;
12   height: 1px;
13   background-color: #e5e5e5;
14   -webkit-transform: scaleY(0.5);
15   transform: scaleY(0.5);
16 }
17 
18 .halfpxline_after:after {
19   bottom: 0;
20   -webkit-transform-origin: 0 1px;
21   transform-origin: 0 1px;
22 }
23 
24 .halfpxline_before:before {
25   top: 0;
26   -webkit-transform-origin: 0 0;
27   transform-origin: 0 0;
28 }