Retina 屏 1px 解决方案

1px.scss

/*
* Tencent is pleased to support the open source community by making WeUI available.
*
* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
*
* Licensed under the MIT License (the "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
*       http://opensource.org/licenses/MIT
*
* Unless required by applicable law or agreed to in writing, software distributed under the License is
* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
* either express or implied. See the License for the specific language governing permissions and
* limitations under the License.
*/

@mixin setLine($c: #c7c7c7) {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 1px;
  border: 1px solid $c;
  color: $c;
  height: 200%;
  transform-origin: left top;
  transform: scale(0.5);
  box-sizing: border-box;
}

@mixin setTopLine($c: #c7c7c7) {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1px solid $c;
  color: $c;
  transform-origin: 0 0;
  transform: scaleY(0.5);
}

@mixin setBottomLine($c: #c7c7c7) {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid $c;
  color: $c;
  transform-origin: 0 100%;
  transform: scaleY(0.5);
}

@mixin setLeftLine($c: #c7c7c7) {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  border-left: 1px solid $c;
  color: $c;
  transform-origin: 0 0;
  transform: scaleX(0.5);
}

@mixin setRightLine($c: #c7c7c7) {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  border-right: 1px solid $c;
  color: $c;
  transform-origin: 100% 0;
  transform: scaleX(0.5);
}

REAMME.md

Retina 屏 1px 解决方案

该解决方案由 Tencent/weui 提供

使用说明

@import 'path/to/1px.scss';

// 设置所有边框
element {
  position: relative;
  &::after {
    @include setLine(#f1f1f1);
  }
}

// 设置上边框
element {
  position: relative;
  &::after {
    @include setLine(#f1f1f1);
  }
}

// 设置右边框
element {
  position: relative;
  &::after {
    @include setRightLine(#f1f1f1);
  }
}

// 设置下边框
element {
  position: relative;
  &::after {
    @include setBottomLine(#f1f1f1);
  }
}

//设置左边框
element {
  position: relative;
  &::after {
    @include setLeftLine(#f1f1f1);
  }
}