解决移动端1px变粗问题

/* 解决1pxISO变粗 - 方式一*/

.input--parent {

position:relative;

  .border--top {

position:absolute;

    left:0;

    top:0;

    height:1px;

    width:100%;

    background:#E7E7E7;

  }

.border--left {

position:absolute;

    left:0;

    top:0;

    width:1px;

    height:100%;

    background:#E7E7E7;

  }

.border--bottom {

position:absolute;

    left:0;

    bottom:0;

    height:1px;

    width:100%;

    background:#E7E7E7;

  }

.border--right {

position:absolute;

    right:0;

    top:0;

    width:1px;

    height:100%;

    background:#E7E7E7;

  }

}

/* 方式二 */

/* 上 */

.borderTop:before {

content:"";

  position:absolute;

  z-index:2;

  left:0;

  top:0;

  height:1px;

  width:100%;

  border-top:1px solid #ccc;

  -webkit-transform-origin:0 0;

  transform-origin:0 0;

  -webkit-transform:scaleY(.5);

  transform:scaleY(.5);

}

/* 方式三 */

.input--parent__third {

border:1px solid #ccc;

  input {

border:none;

  }

}

你可能感兴趣的:(解决移动端1px变粗问题)