关于 1px border
Can you have a 0.5px border on a Retina Display?
实现方式
1. linear-gradient
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.border-onepx-v {
background-image: linear-gradient(to bottom, #ccc 0%,#ccc 51%, transparent 51%);
background-repeat: no-repeat;
background-size: 100% 1px;
}
.border-onepx-h {
background-image: linear-gradient(to right, #ccc 0%,#ccc 51%, transparent 51%);
background-repeat: no-repeat;
background-size: 1px 100%;
}
|
2. box-shadow
1
2
3
4
| .box-shadow-1px {
box-shadow: inset -1px -1px 1px -1px #ccc,
inset 1px 1px 1px -1px #ccc;
}
|
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
|
.scale-1px {
position: relative;
border:none;
}
.scale-1px::after {
content: '';
position: absolute;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
transform: scaleY(0.5);
transform-origin: 0 0;
}
.scale-1px {
position: relative;
border:none;
}
.scale-1px::after {
content: '';
position: absolute;
top: 0;
left: 0;
border: 1px solid #000;
box-sizing: border-box;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: left top;
}
|
参考链接
CSS retina hairline, the easy way.
使用Flexible实现手淘H5页面的终端适配
7种方法解决移动端Retina屏幕1px边框问题