使用伪类处理移动端1px(1像素)边框问题

.box{
    position: relative;
    border: none;
}

.box:after{  //  单边框
    content: '';
    position: absolute;
    bottom: 0;
    background: #DCDCDC;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

.box:after{  //   四条边框
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #000;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}
posted @ 2017-08-21 19:58  Stone&IT  阅读(1730)  评论(1编辑  收藏  举报