关于1px的解决方案 about ppts HOT 2 CLOSED

// retina border
// 0.5px实现 ios9
@mixin retina-one-px() {
    @supports (border-width: 0.5px) {
        @media only screen and (-webkit-min-device-pixel-ratio: 2), screen and (-webkit-min-device-pixel-ratio: 3) {
            border-width: 0.5px;
        }
    }
}

// linear-gradient实现
// 安卓4.3- 不支持background-size的百分比
@mixin retina-one-px-bg($direction: top, $color: $colorBorder) {
    background-repeat: no-repeat;
    @if $direction == top {
        background-image: linear-gradient(to bottom, $color 50%, transparent 50%);
        background-size: 100% 1px;
    }
    @if $direction == bottom {
        background-image: linear-gradient(to top, $color 50%, transparent 50%);
        background-size: 100% 1px;
        background-position: left bottom;
    }
    @if $direction == left {
        background-image: linear-gradient(to right, $color 50%, transparent 50%);
        background-size: 1px 100%;
    }
    @if $direction == right {
        background-image: linear-gradient(to left, $color 50%, transparent 50%);
        background-size: 1px 100%;
        background-position: right top;
    }
    @if $direction == v { // 左右两个边框
        background-image: linear-gradient(to right, $color 50%, transparent 50%),linear-gradient(to left, $color 50%, transparent 50%);
        background-size: 1px 100%;
        background-position: left top, right top;
    }
    @if $direction == h { // 上下两个边框
        background-image: linear-gradient(to bottom, $color 50%, transparent 50%), linear-gradient(to top, $color 50%, transparent 50%);
        background-size: 100% 1px;
        background-position: left top, left bottom;
    }
    @if $direction == all { // 上下左右四个边框
        background-image: linear-gradient(to bottom, $color 50%, transparent 50%), linear-gradient(to top, $color 50%, transparent 50%), linear-gradient(to right, $color 50%, transparent 50%),linear-gradient(to left, $color 50%, transparent 50%);
        background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
        background-position: left top, left bottom, left top, right top;
    }
}

// border和transform实现
// 注意before和after的层级问题
@mixin retina-one-px-border($direction: top, $color: $colorBorder) {
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;

    @if $direction == top or $direction == bottom{    
        right: 0;
        height: 0;
        transform: scaleY(0.5);
        border-top: 1px solid $color;
    }
    @if $direction == bottom {
        top: auto;
        bottom: 0;
    }
    @if $direction == right or $direction == left{
        width: 0;
        bottom: 0;
        transform: scaleX(0.5);
        border-left: 1px solid $color;
    }
    @if $direction == right {
        left: auto;
        right: 0;
    }
    @if $direction == all {
        width: 200%;
        height: 200%;
        transform-origin: left top;
        transform: scale(0.5);
        border: 1px solid $color;
    }
}

// border top & bottom
%border-tb {
    position: relative;
    &::before {
        content: "";
        @include retina-one-px-border(top);
        z-index: 1;
    }
    &::after {
        content: "";
        @include retina-one-px-border(bottom);
    }
}

// border all
%border-all {
    position: relative;
    &::before {
        content: "";
        @include retina-one-px-border(all);
        z-index: -1;
    }
}