1 /*手机端实现真正的一像素边框*/
2 .border-1px, .border-bottom-1px, .border-top-1px, .border-left-1px, .border-right-1px {
3 position: relative;
4 }
5 /*线条颜色 黑色*/
6 .border-bottom-1px::after, .border-top-1px::after, .border-left-1px::after, .border-right-1px::after {
7 background-color: #e5e5e5;
8
9 }
10
11 /*底边边框一像素*/
12 .border-bottom-1px::after {
13 content:"";
14 position: absolute;
15 left: 0;
16 bottom: 0;
17 width: 100%;
18 height: 1px;
19 transform-origin: 0 0;
20 }
21
22 /*上边边框一像素*/
23 .border-top-1px::after {
24 content:"";
25 position: absolute;
26 left: 0;
27 top: 0;
28 width: 100%;
29 height: 1px;
30 transform-origin: 0 0;
31 }
32
33 /*左边边框一像素*/
34 .border-left-1px::after {
35 content:"";
36 position: absolute;
37 left: 0;
38 top: 0;
39 width: 1px;
40 height: 100%;
41 transform-origin: 0 0;
42 }
43
44 /*右边边框1像素*/
45 .border-right-1px::after {
46 content: "";
47 box-sizing: border-box;
48 position: absolute;
49 right: 0;
50 top: 0;
51 width: 1px;
52 height: 100%;
53 transform-origin: 0 0;
54 }
55
56 /*边框一像素*/
57 .border-1px::after {
58 content: "";
59 box-sizing: border-box;
60 position: absolute;
61 left: 0;
62 top: 0;
63 width: 100%;
64 height: 100%;
65 border: 1px solid #e5e5e5;
66 }
67
68 /*设备像素比*/
69 @media only screen and (-webkit-min-device-pixel-ratio: 2.0), only screen and (min-resolution: 2dppx) {
70 .border-bottom-1px::after, .border-top-1px::after {
71 transform: scaleY(0.5);
72 }
73
74 .border-left-1px::after, .border-right-1px::after {
75
76 transform: scaleX(0.5);
77 }
78 .border-1px::after {
79 width: 200%;
80 height: 200%;
81 transform: scale(0.5);
82 transform-origin: 0 0;
83 }
84 }
85
86 /*设备像素比*/
87 @media only screen and (-webkit-min-device-pixel-ratio: 3.0), only screen and (min-resolution: 3dppx) {
88 .border-bottom-1px::after, .border-top-1px::after {
89 transform: scaleY(0.333);
90 }
91 .border-left-1px::after, .border-right-1px::after {
92 transform: scaleX(0.333);
93 }
94 .border-1px::after {
95 width: 300%;
96 height: 300%;
97 transform: scale(0.333);
98 transform-origin: 0 0;
99 }
100 }
