移动端1px边框的实现 

  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 }

 

posted @ 2018-06-14 17:20  我要活的像太阳  阅读(455)  评论(0)    收藏  举报