移动端一像素边框解决方案

scss

 1 @function rem($val) {
 2   @return $val/75+rem;
 3 }
 4 
 5 @mixin border-1px($position, $color: #ccc, $position: relative, $radius: 0, $style: solid){
 6   position: $position;
 7   &::after{
 8     @if $position == 'l' {
 9       border-left: 1px $style $color;
10     }@else if $position == 'r' {
11       border-right: 1px $style $color;
12     }@else if $position == 't' {
13       border-top: 1px $style $color;
14     }@else if $position == 'b' {
15       border-bottom: 1px $style $color;
16     }@else{
17       border: 1px $style $color;
18     }
19     content: "";
20     pointer-events: none;
21     display: block;
22     position: absolute;
23     left: 0;
24     top: 0;
25     transform-origin: 0 0;
26     border-radius: $radius;
27     box-sizing: border-box;
28     width: 100%;
29     height: 100%;
30     @media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2),(min-resolution: 2dppx){
31       width: 200%;
32       height: 200%;
33       border-radius: $radius * 2;
34       transform: scale(.5) translateZ(0)
35     } 
36     @media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3),(min-resolution: 3dppx){
37       width: 300%;
38       height: 300%;
39       border-radius: $radius * 3;
40       transform: scale(.333) translateZ(0);
41     } 
42   }
43 }

less

 

 1 .direction(@direction) when (@direction = top){
 2     border-top: 1px @style @color;
 3 }
 4 .direction(@direction) when (@direction = bottom){
 5     border-bottom: 1px @style @color;
 6 }
 7 .direction(@direction) when (@direction = left){
 8     border-left: 1px @style @color;
 9 }
10 .direction(@direction) when (@direction = right){
11     border-right: 1px @style @color;
12 }
13 .direction(@direction) when (@direction = all){
14     border: 1px @style @color;
15 }
16 .border-1px (@direction: all; @color: #cccccc; @position: relative; @radius: 0; @style: solid){
17     position: @position;
18     &::after{
19         .direction(@direction);
20         content: "";
21         pointer-events: none;
22         display: block;
23         position: absolute;
24         left: 0;
25         top: 0;
26         transform-origin: 0 0;
27         border-radius: @radius;
28         box-sizing: border-box;
29         width: 100%;
30         height: 100%;
31         @media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2),(min-resolution: 2dppx){
32             width: 200%;
33             height: 200%;
34             border-radius: @radius * 2;
35             transform: scale(.5) translateZ(0)
36         } 
37         @media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3),(min-resolution: 3dppx){
38             width: 300%;
39             height: 300%;
40             border-radius: @radius * 3;
41             transform: scale(.333) translateZ(0);
42         } 
43     }
44 }

 

 

 

css

1 .box{
2   margin: rem(100);
3   width: rem(200);
4   height: rem(200);
5   background: #ccc;
6   @include border-1px('', #000);
7 }

 

posted @ 2018-04-12 11:27  一像素boy  阅读(193)  评论(0)  编辑  收藏  举报