移动端网页如果直接用最小的1px设定边框线，会显得很粗很难看。是否可以像app里边的那样设定更细的线呢？答案是肯定的，如下为sass的一个mixin, 供参考：

@mixin smlBorder($borderColor:$baseBorderColor,$style:solid){
    position:relative;
    &:after,
    &:before{
        content: '';
        display: block;
        color: $borderColor;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        -webkit-transform-origin: left top;
        box-sizing:border-box;
        width:100%;
        height:100%;
    }
    &:after{
        border-left: 1px $style $borderColor;
        border-right: 1px $style $borderColor;
    }
    &:before{
        border-top: 1px $style $borderColor;
        border-bottom: 1px $style $borderColor;
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
        &:after {
            -webkit-transform: scaleX(.7);
            transform: scaleX(.7);
            width:142.857%;
        }
        &:before {
            -webkit-transform: scaleY(.7);
            transform: scaleY(.7);
            height:142.857%;
        }
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
        &:after {
            -webkit-transform: scaleX(.5);
            transform: scaleX(.5);
            width:200%;
        }
        &:before {
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
            height:200%;
        }
    }
}

可留意到技术点在于判断-webkit-min-device-pixel-ratio,然后对border设定transform: scale().

其他border-bottom相关类似方法。