Retina屏下的1px边框的实现 

 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>

 

posted @ 2017-08-23 10:12  wǒの湁茡潞釦﹌  阅读(143)  评论(0)    收藏  举报