移动端 1px边框

Posted cdj61

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端 1px边框相关的知识,希望对你有一定的参考价值。

底部1px虚线边框:

.line {
    width: 100%;
    height: 100px;
    position:relative;
    
    border-left:1px dashed red;
    border-right:1px dashed red;
}
.line:after {
    content:‘‘;
    position: absolute;
    width:100%;
    bottom:0;
    right:0;
    border-top: 1px dashed red;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

顶部1px实线边框

.borderBottom {
    position: relative;
    height: 100px;
    width: 100%;
    border-left: 1px solid green;
    border-right: 1px solid green;
}
.borderBottom:after {
    content: ‘‘;
    position: absolute;
    width: 100%;
    height: 1px;
    top: 0;
    left: 0;
    background: red;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

技术图片

 

以上是关于移动端 1px边框的主要内容,如果未能解决你的问题,请参考以下文章

移动端 1px边框 问题

移动端 1px边框

移动端1px 边框完整方案(四个方向)

移动端1像素边框问题

解决移动端1px边框问题的几种方法

移动端Retina屏幕1px边框问题