1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Retina屏下的1px边框的实现</title>
6 <style type="text/css">
7 div{
8 margin: 10px 0;
9 }
10 .line-top,.line-bottom,.line-top-bot{
11 position: relative;
12 }
13 .line-top:after{
14 content: "";
15 position: absolute;
16 left: 0;
17 top: 0;
18 width: 100%;
19 height: 1px;
20 z-index: 1;
21 background-image:linear-gradient(180deg, #ccc, #ccc 50%, #fff 50%);
22 background-size: 100% 1px;
23 background-repeat: no-repeat;
24 background-position: bottom;
25 }
26 .line-bottom:after{
27 content: "";
28 position: absolute;
29 left: 0;
30 bottom: 0;
31 width: 100%;
32 height: 1px;
33 z-index: 1;
34 background-image:linear-gradient(180deg, #f00, #f00 50%, #fff 50%);
35 background-size: 100% 1px;
36 background-repeat: no-repeat;
37 background-position: bottom;
38 }
39 .line-top-bot:before{
40 content: "";
41 position: absolute;
42 left: 0;
43 top: 0;
44 width: 100%;
45 height: 1px;
46 z-index: 1;
47 background-image:linear-gradient(180deg, #ccc, #ccc 50%, #fff 50%);
48 background-size: 100% 1px;
49 background-repeat: no-repeat;
50 background-position: top;
51 }
52 .line-top-bot:after{
53 content: "";
54 position: absolute;
55 left: 0;
56 bottom: 0;
57 width: 100%;
58 height: 1px;
59 z-index: 1;
60 background-image:linear-gradient(180deg, #f00, #f00 50%, #fff 50%);
61 background-size: 100% 1px;
62 background-repeat: no-repeat;
63 background-position: bottom;
64 }
65 </style>
66 </head>
67 <body>
68 <div class="line-top">上面的边框</div>
69 <div class="line-bottom">下面的边框</div>
70 <div class="line-top-bot">上下边框</div>
71 </body>
72 </html>
