移动端1px横线，竖线解决方案

admin

1. <div class="weui_grids">
   
2.                         <a href="#" class="weui_grid">
   
3.                                 1
   
4.                         </a>
   
5.                         <a href="#" class="weui_grid">
   
6.                                 1
   
7.                         </a>
   
8.                         <a href="#" class="weui_grid">
   
9.                                 1
   
10.                         </a>
    
11.                         <a href="#" class="weui_grid">
    
12.                                 1
    
13.                         </a>
    
14.                 </div>

复制代码

1. <style>
   
2.                         .weui_grids {
   
3.                                 position: relative;
   
4.                                 overflow: hidden;
   
5.                                 margin: 30px;
   
6.                         }
   
7.                         .weui_grids:before {
   
8.                                 position: absolute;
   
9.                                 left: 0;
   
10.                                 top: 0;
    
11.                                 width: 100%;
    
12.                                 height: 1px;
    
13.                                 border-top: 1px solid #D9D9D9;
    
14.                                 color: #D9D9D9;
    
15.                                 -webkit-transform-origin: 0 0;
    
16.                                 -ms-transform-origin: 0 0;
    
17.                                 transform-origin: 0 0;
    
18.                                 -webkit-transform: scaleY(0.5);
    
19.                                 -ms-transform: scaleY(0.5);
    
20.                                 transform: scaleY(0.5);
    
21.                         }
    
22.                         .weui_grids:after {
    
23.                                 position: absolute;
    
24.                                 left: 0;
    
25.                                 top: 0;
    
26.                                 width: 1px;
    
27.                                 height: 100%;
    
28.                                 border-left: 1px solid #D9D9D9;
    
29.                                 color: #D9D9D9;
    
30.                                 -webkit-transform-origin: 0 0;
    
31.                                 -ms-transform-origin: 0 0;
    
32.                                 transform-origin: 0 0;
    
33.                                 -webkit-transform: scaleX(0.5);
    
34.                                 -ms-transform: scaleX(0.5);
    
35.                                 transform: scaleX(0.5);
    
36.                         }
    
37.                         .weui_grid {
    
38.                                 position: relative;
    
39.                                 float: left;
    
40.                                 padding: 20px 10px;
    
41.                                 width: 33.33333333%;
    
42.                                 box-sizing: border-box;
    
43.                         }
    
44.                         a {
    
45.                                 text-decoration: none;
    
46.                         }
    
47.                         .weui_grid:before {
    
48.                                 content: " ";
    
49.                                 position: absolute;
    
50.                                 right: 0;
    
51.                                 top: 0;
    
52.                                 width: 1px;
    
53.                                 height: 100%;
    
54.                                 border-right: 1px solid #D9D9D9;
    
55.                                 color: #D9D9D9;
    
56.                                 -webkit-transform-origin: 0 100%;
    
57.                                 -ms-transform-origin: 0 100%;
    
58.                                 transform-origin: 0 100%;
    
59.                                 -webkit-transform: scaleX(0.5);
    
60.                                 -ms-transform: scaleX(0.5);
    
61.                                 transform: scaleX(0.5);
    
62.                                 right: -1px;
    
63.                         }
    
64.                         .weui_grid:after {
    
65.                                 content: " ";
    
66.                                 position: absolute;
    
67.                                 left: 0;
    
68.                                 bottom: 0;
    
69.                                 width: 100%;
    
70.                                 height: 1px;
    
71.                                 border-bottom: 1px solid #D9D9D9;
    
72.                                 color: #D9D9D9;
    
73.                                 -webkit-transform-origin: 0 100%;
    
74.                                 -ms-transform-origin: 0 100%;
    
75.                                 transform-origin: 0 100%;
    
76.                                 -webkit-transform: scaleY(0.5);
    
77.                                 -ms-transform: scaleY(0.5);
    
78.                                 transform: scaleY(0.5);
    
79.                         }
    
80.                 </style>

复制代码