移动端实现border:1px的解决方案

1、利用device-pixel-ratio

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

//元素正常设置border，增加一个类border-1px   @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5){ .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.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、使用box-shadow

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

 

优点：满足所有场景，包括圆角，代码量少。
缺点：边框有阴影，颜色变浅。

 

3、使用伪类+transform 实现

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

//单条border .border-1px{ position: relative; &:after{ content: ''; display: block; position: absolute; width: 100%; left: 0; bottom: 0; height: 1px;   -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } } //四条border .border-1px{ position: relative; &:after{ content: ''; position: 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; } }

优点：所有场景都满足，支持圆角（伪类和本类都需要加border-radius）
缺点：对于已经使用伪类的元素，可能需要多层嵌套

 

 

4、利用背景渐变

1 2 3 4 5 6 7 8 9 10 11 12

.background-gradient-1px { background: linear-gradient(180deg, #fff, #fff 50%, transparent 50%) top left / 100% 1px no-repeat, 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; } /* 或者 */ .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; }

优点：可以实现单条、多条边框，颜色可随意设置
缺点：代码量大，圆角无法实现，兼容性问题

 

转自：http://www.jianshu.com/p/7e63f5a32636

转载于:https://www.cnblogs.com/zjpzjp/p/7139677.html