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

Posted 教父123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端实现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

以上是关于移动端实现border:1px的解决方案的主要内容,如果未能解决你的问题,请参考以下文章

如何解决移动端Retina屏1px像素的问题?

移动端1px像素解决方式,从1px像素问题剖析像素及viewport

移动端1px显示异常解决方案

实现移动端1像素线--stylus

stylus 移动端边框1像素问题解决方案

前端开发工具收藏