移动端一像素边框解决方案
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 }
