0.5px的边 scss mixin解决方案

0.5px的需求应用场景十分广泛，有的时候是直接在div上加个class，有的时候则是需要某些class自带这样的边（比如重写引用的三方组件时，不方便修改html）。

0.5px像素的应用场景举例

使用示例

// 在scss文件中使用
@import './borderLine.scss';
$border-color: #dae0ec;
.mint-msgbox-content {
       @include border-bottom($border-color);
}

// 在vue文件中使用
<template>
  <div class="borderTop">hello</div>
</template>
<style>
@import './borderLine.scss';
@include border-line-style(#dae0ec)
</style>

源码

// borderLine.scss
@mixin border-line-style($color: #dae0ec) {
    $border-color: $color;
    .borderLeft {
        border-left: 1px solid $border-color;
        @include border-left(#dae0ec);
    }
    .borderTop {
        border-top: 1px solid $border-color;
        @include border-top(#dae0ec);
    }
    .borderRight {
        border-right: 1px solid $border-color;
        @include border-right(#dae0ec);
    }
    .borderBottom {
        border-bottom: 1px solid $border-color;
        @include border-bottom(#dae0ec);
    }
}

@mixin border-top($color: #dae0ec) {
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
        @include border-top-main($color);
    }
    @media screen and (-webkit-min-device-pixel-ratio: 3) {
        @include border-top-main($color);
    }
}
@mixin border-right($color: #dae0ec) {
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
        @include border-right-main($color);
    }
    @media screen and (-webkit-min-device-pixel-ratio: 3) {
        @include border-right-main($color);
    }
}
@mixin border-bottom($color: #dae0ec) {
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
        @include border-bottom-main($color);
    }
    @media screen and (-webkit-min-device-pixel-ratio: 3) {
        @include border-bottom-main($color);
    }
}
@mixin border-left($color: #dae0ec) {
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
        @include border-left-main($color);
    }
    @media screen and (-webkit-min-device-pixel-ratio: 3) {
        @include border-left-main($color);
    }
}

@mixin border-top-main($border-color) {
    background-size: 100% 1px;
    background-position: top;
    border: none;
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(50%, transparent),
        color-stop(50%, $border-color),
        color-stop(100%, $border-color)
    );
    background-image: -webkit-linear-gradient(
        top,
        transparent 50%,
        $border-color 50%,
        $border-color 100%
    );
    background-image: linear-gradient(
        to bottom,
        transparent 50%,
        $border-color 50%,
        $border-color 100%
    );
    background-repeat: no-repeat;
}
@mixin border-right-main($border-color) {
    background-size: 1px 100%;
    background-position: right;
    border: none;
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(50%, transparent),
        color-stop(50%, $border-color),
        color-stop(100%, $border-color)
    );
    background-image: -webkit-linear-gradient(
        left,
        transparent 50%,
        $border-color 50%,
        $border-color 100%
    );
    background-image: linear-gradient(
        to right,
        transparent 50%,
        $border-color 50%,
        $border-color 100%
    );
    background-repeat: no-repeat;
}
@mixin border-bottom-main($border-color) {
    background-size: 100% 1px;
    background-position: bottom;
    border: none;
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(50%, transparent),
        color-stop(50%, $border-color),
        color-stop(100%, $border-color)
    );
    background-image: -webkit-linear-gradient(
        top,
        transparent 50%,
        $border-color 50%,
        $border-color 100%
    );
    background-image: linear-gradient(
        to bottom,
        transparent 50%,
        $border-color 50%,
        $border-color 100%
    );
    background-repeat: no-repeat;
}
@mixin border-left-main($border-color) {
    background-size: 1px 100%;
    background-position: left;
    border: none;
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(50%, transparent),
        color-stop(50%, $border-color),
        color-stop(100%, $border-color)
    );
    background-image: -webkit-linear-gradient(
        left,
        transparent 50%,
        $border-color 50%,
        $border-color 100%
    );
    background-image: linear-gradient(
        to right,
        transparent 50%,
        $border-color 50%,
        $border-color 100%
    );
    background-repeat: no-repeat;
}