移动端写0.5px边框

移动端1px边框问题

移动端1px好像是比效果图大些,在查了一下解决办法,亲测有效


单条border样式设置

.scale-1px{
     
    position: relative;
    border:none;
    }
    .scale-1px:after{
     
    content: '';
    position: absolute;
    bottom: 0;
    background: #000;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    }

四条boder样式设置:

    .scale-1px{
     
    position: relative;
    margin-bottom: 20px;
    border:none;
    }
    .scale-1px: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;
    }

支持圆角

你可能感兴趣的:(css,html5)