移动端遇到1px的问题的解决

参考:http://www.jianshu.com/p/7e63f5a32636
  • less写的
.border-1px(@color){
    position: relative;
    &:after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid @color;
        -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;
    }
}

.inpWrap{
     /*border: 1px solid #c8c8c8;*/
     .border-1px( #c8c8c8); /*使用*/
     width: 500px;
     height: 80px;
     margin: 0 auto 18px;
}
  • 使用前效果: 边框粗细不一样
1px_使用前.jpg
  • 使用后效果:


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

推荐阅读更多精彩内容