移动端实现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的解决方案的主要内容，如果未能解决你的问题，请参考以下文章