BORDER:1PX Solutions for Mobile implementations

1. Using Device-pixel-ratio

1234567891011121314151617181920212223242526272829303132333435363738394041

The element normally sets border, adding a class border-1px @media (-webkit-min-device-pixel-ratio:1.5), (min-device-pixel-ratio:1.5) {. Border-1px{&::after{content: ";p osition:absolute;top:0;left:0;border:1px solid #ddd;-webkit-box-sizing: Border-box;box-sizing:border-box;width:200%;height:200%;-webkit-transform:scale (0.7); Transform:scale (0.7);- Webkit-transform-origin:left top;transform-origin:left Top;}}} @media (-webkit-min-device-pixel-ratio:2), (Min-device-pixel-ratio:2) {. Border-1px{&::after{content: "; position:absolute;top:0;left:0;border:1px solid #ddd;-webkit-box-sizing:border-box;box-sizing:border-box;width: 200%;height:200%;-webkit-transform:scale (0.5); Transform:scale (0.5);-webkit-transform-origin:left top; Transform-origin:left top;}}}

Devicepixelratio = 2

<meta name= "viewport" content= "initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, User-scalable=no" >

Devicepixelratio = 3

<meta name= "viewport" content= "initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, User-scalable=no ">

2. Using Box-shadow

1	Box-shadow:inset 1px-1px 1px-1px #fff, inset-1px 1px 1px-1px #fff;

Pros: Meet all scenarios, including rounded corners, with less code.
Disadvantage: The border has a shadow and the color becomes lighter.

3, using Pseudo-class +transform implementation

1234567891011121314151617181920212223242526272829303132333435

Single border.border-1px{position:relative;&:after{content: ";d isplay:block;position:absolute;width:100%;left : 0;bottom:0;height:1px; -webkit-transform:scaley (0.5); Transform:scaley (0.5);}} Four article border.border-1px{position:relative;&:after{content: ";p osition:absolute;top:0;left:0;border:1px solid # Fff;-webkit-box-sizing:border-box;box-sizing:border-box;width:200%;height:200%;-webkit-transform:scale (0.5); Transform:scale (0.5);//-webkit-transform-origin:left top;//transform-origin:left top;}}

Pros: All scenarios are met, support rounded corners (pseudo class and this class need to add Border-radius)
Disadvantage: Multiple nesting may be required for elements that already use pseudo-classes

4, using the background gradient

123456789101112

. background-gradient-1px {background:linear-gradient (180deg, #fff, #fff 50%, transparent 50%) top left/100% 1px no-repea T,linear-gradient (90deg, #fff, #fff 50%, transparent 50%) top right/1px 100% no-repeat,linear-gradient (0, #fff, #fff 50% , transparent 50%) bottom right/100% 1px no-repeat,linear-gradient ( -90deg, #fff, #fff 50%, transparent 50%) bottom left /1px 100% no-repeat;} /* or */.background-gradient-1px{background:-webkit-gradient (linear, left top, left bottom, color-stop (. 5, Transparent ), Color-stop (. 5, #fff), to (#fff)) left bottom repeat-x;background-size:100% 1px;}

Advantages: can achieve a single, multi-border, color can be set freely
Cons: Large code size, rounded corners cannot be implemented, compatibility issues

Transferred from: http://www.jianshu.com/p/7e63f5a32636

BORDER:1PX Solutions for Mobile implementations