解决border在iOS和Android上的渲染不同的问题，绝对1px的border

border-iOS-Android-Consistency.scss

@mixin fine-line-top {

    position: absolute;
    display: block;
    background-image: linear-gradient(180deg, #dedede 0%, #dedede 50%, transparent 50%, transparent 100%);
    background-size: 100% 1px;
    content: ' ';
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    z-index: 1;

}

@mixin fine-line-bottom {

    position: absolute;
    display: block;
    background-image: linear-gradient(0deg, #dedede 0%, #dedede 50%, transparent 50%, transparent 100%);
    background-size: 100% 1px;
    content: ' ';
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    z-index: 1;

}

@mixin fine-line-left {

    position: absolute;
    display: block;
    background-image: linear-gradient(90deg, #dedede 0%, #dedede 50%, transparent 50%, transparent 100%);
    background-size: 1px 100%;
    content: ' ';
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    z-index: 1;

}

@mixin fine-line-right {

    position: absolute;
    display: block;
    background-image: linear-gradient(-90deg, #dedede 0%, #dedede 50%, transparent 50%, transparent 100%);
    background-size: 1px 100%;
    content: ' ';
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    z-index: 1;

}

@mixin fine-line-top-after {
    border-top: 0;
    position: relative;
    &::after {
        @include fine-line-top;
    }
}

@mixin fine-line-bottom-after {
    border-bottom: 0;
    position: relative;
    &::after {
        @include fine-line-bottom;
    }
}

@mixin fine-line-left-after {
    border-left: 0;
    position: relative;
    &::after {
        @include fine-line-left;
    }
}

@mixin fine-line-right-after {
    border-right: 0;
    position: relative;
    &::after {
        @include fine-line-right;
    }
}

@mixin fine-line-top-before {
    border-top: 0;
    position: relative;
    &::before {
        @include fine-line-top;
    }
}

@mixin fine-line-bottom-before {
    border-bottom: 0;
    position: relative;
    &::before {
        @include fine-line-bottom;
    }
}

@mixin fine-line-left-before {
    border-left: 0;
    position: relative;
    &::before {
        @include fine-line-left;
    }
}

@mixin fine-line-right-before {
    border-right: 0;
    position: relative;
    &::before {
        @include fine-line-right;
    }
}

.fine-line-top-after {
    border-top: 0;
    position: relative;
    &::after {
        @include fine-line-top;
    }
}

.fine-line-bottom-after {
    border-bottom: 0;
    position: relative;
    &::after {
        @include fine-line-bottom;
    }
}

.fine-line-left-after {
    border-left: 0;
    position: relative;
    &::after {
        @include fine-line-left;
    }
}

.fine-line-right-after {
    border-right: 0;
    position: relative;
    &::after {
        @include fine-line-right;
    }
}

.fine-line-top-before {
    border-top: 0;
    position: relative;
    &::before {
        @include fine-line-top;
    }
}

.fine-line-bottom-before {
    border-bottom: 0;
    position: relative;
    &::before {
        @include fine-line-bottom;
    }
}

.fine-line-left-before {
    border-left: 0;
    position: relative;
    &::before {
        @include fine-line-left;
    }
}

.fine-line-right-before {
    border-right: 0;
    position: relative;
    &::before {
        @include fine-line-right;
    }
}