解决移动端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;

  }

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容