iphone手机,设置border:1px solid #000,实际显示要比一像素要宽,具体原因请自己Google,
通过transform: scale(0.5)可以实现1像素border,具体封装如下:
注意:
- 要显示border的元素需要设置:position:relative或者position:absolute;
- 同时只能设置一个top或者bottom(一个left或者right)
因为top和left是使用:after,left和right使用的是before; - 这种方式无法设置border-radius;
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81@borderDefaultWidth: 1px;
@borderDefaultColor: #e8e8e8;
.border-top(@width: @borderDefaultWidth, @color: @borderDefaultColor) {
&:after {
top: 0;
.border-top-bottom-style(@width, @color);
}
.media()
}
.border-bottom(@width: @borderDefaultWidth, @color: @borderDefaultColor) {
&:after {
bottom: 0;
.border-top-bottom-style(@width, @color);
}
.media()
}
.border-right(@width: @borderDefaultWidth, @color: @borderDefaultColor) {
&:before {
right: 0;
.border-left-right-style(@width, @color);
}
.media()
}
.border-left(@width: @borderDefaultWidth, @color: @borderDefaultColor) {
&:before {
left: 0;
.border-left-right-style(@width, @color);
}
.media()
}
.border-top-bottom-style(@width, @color) {
content: "\20";
display: block;
position: absolute;
left: 0;
right: 0;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
height: @width;
background-color: @color;
}
.border-left-right-style(@width, @color) {
content: "\20";
display: block;
position: absolute;
top: 0;
bottom: 0;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
width: @width;
background-color: @color;
}
.media() {
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
&:after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
&:after {
-webkit-transform: scaleY(0.33333);
transform: scaleY(0.33333);
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 4) {
&:after {
-webkit-transform: scaleY(0.25);
transform: scaleY(0.25);
}
}
}
使用方法:1
2
3
4
5
6@import '../path-to/mixins.less';
div{
display: relative;
.border-top();
.border-left();
}