Настоящая граница .1px, 🚀 поддерживает любое количество сторон и закругленных углов, 1 способ

Связанный исходный код:GitHub.com/easy86/5ah, В это время…

Что такое «настоящая граница .1px»?

🚀 Поскольку все мобильные телефоны теперь являются «экранами с высокой плотностью», написанный нами 1 пиксель будет отображаться на мобильном телефоне с 2/3 физическими пикселями, поэтому1pxГраница будет выглядетьотносительно толстый, поэтому, если вы также чувствуете, что ваш1px граница толще, то читайте ниже.

================ Уведомление ================

Скриншот может быть неочевидным, потому что он увеличен. Вы можете открыть два URL-адреса с помощью своего мобильного телефона. Эффект сравнения очевиден:

================ Уведомление ================

1 Решение «Универсальное масло»

На самом деле, если вы используете Baidu «1px border», будет много статей, большинство из них скажут «да».7 способов, а на самом деле, после моего теста, на самом делеНам нужно знать только один из них, далее будет представлен метод этого «волшебного масла».

Поговорим о принципе

В основном путем добавления к целевому элементуposition:relative;
а затем использовать его псевдокласс:afterили:beforeнарисуйте элемент, ширина и высота которого в 2 или 3 раза больше;
Затем нарисуйте границу 1px к элементу псевдокласса;
пройти черезmedia queryРешите масштабировать элементы псевдокласса до 1/2 или 1/3;
Добавьте элементы псевдоклассаpointer-events: none;, чтобы элементы псевдокласса можно было кликать, то есть их можно было видеть, но не запускать никаких дефолтных событий (клик и т.д.);

код

сигнатура функции

Для удобства использования я инкапсулировал его как миксин scss.

@mixin thinBorder($directionMaps: bottom, $color: #ccc, $radius:(0, 0, 0, 0), $position: after)

Под описанием:

$directionMaps: это тип списка, который можно передавать в нескольких направлениях, то есть можно создать несколько границ линии защиты, значение по умолчанию равноbottom, вы можете пройти (сверху, слева, снизу, справа) в 4 направлениях по мере необходимости;

$color: цвет границы, по умолчанию#ccc;

$radius: радиус угла, по умолчанию 0;

$positionявляется расширенной настройкой и, как правило, не требует изменения, посколькутонкая границаРеализация css использует псевдоклассы css, поэтому во избежание возможных конфликтов стилей мы можем указать использование:afterвсе еще:before, дефолтafter;

🤖Вы можете напрямую скопировать приведенный ниже код в свой проект, чтобы использовать

Давайте посмотрим на реализацию кода ниже:

@mixin thinBorder($directionMaps: bottom, $color: #ccc, $radius:(0, 0, 0, 0), $position: after) {
    // 是否只有一个方向
    $isOnlyOneDir: string==type-of($directionMaps);

    @if ($isOnlyOneDir) {
        $directionMaps: ($directionMaps);
    }

    @each $directionMap in $directionMaps {
        border-#{$directionMap}: 1px solid $color;
    }

    // 判断圆角是list还是number
    @if(list==type-of($radius)) {
        border-radius: nth($radius, 1) nth($radius, 2) nth($radius, 3) nth($radius, 4);
    }

    @else {
        border-radius: $radius;
    }

    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
        & {
            position: relative;

            // 删除1像素密度比下的边框
            @each $directionMap in $directionMaps {
                border-#{$directionMap}: none;
            }
        }

        &:#{$position} {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 200%;
            height: 200%;
            transform: scale(0.5);
            box-sizing: border-box;
            padding: 1px;
            transform-origin: 0 0;
            pointer-events: none;
            border: 0 solid $color;

            @each $directionMap in $directionMaps {
                border-#{$directionMap}-width: 1px;
            }

            // 判断圆角是list还是number
            @if(list==type-of($radius)) {
                border-radius: nth($radius, 1)*2 nth($radius, 2)*2 nth($radius, 3)*2 nth($radius, 4)*2;
            }

            @else {
                border-radius: $radius*2;
            }

        }
    }

    @media only screen and (-webkit-min-device-pixel-ratio: 3) {
        &:#{$position} {

            // 判断圆角是list还是number
            @if(list==type-of($radius)) {
                border-radius: nth($radius, 1)*3 nth($radius, 2)*3 nth($radius, 3)*3 nth($radius, 4)*3;
            }

            @else {
                border-radius: $radius*3;
            }

            width: 300%;
            height: 300%;
            transform: scale(0.3333);
        }
    }
}

использовать

одна боковая граница

генерировать.border-top-1px4 односторонних бордюра;

@each $dir in (top,right,bottom,left) {
  .border-#{$dir}-#{1}px {
    @include thinBorder( $dir);
  }
}

Многосторонняя граница

Создайте «красную» многостороннюю границу.border-top-left-red-1px

  .border-top-left-red-1px{
    @include thinBorder((top,left), red);
  }

закругленная граница

Создайте рамку с закругленными углами 100px.border-top-left-round-1px

  .border-top-left-red-1px{
    @include thinBorder(top, red, 100px);
  }

использовать`:before`для создания границ

  .border-top-before{
    @include thinBorder(top, red, 0, before);
  }

ios поддерживает дробные пиксели

На самом деле ios8 и выше поддерживают дробные пиксели, а также могут быть реализованы тонкие границы, напримерborder-width:0.5px, но Android не поддерживает его, поэтому, если вам нужна только совместимость с ios, вы можете использовать десятичные дроби в качестве единиц измерения, но я все же рекомендую использовать приведенное вышеmixin, после всегоТот же беззаботный эффект.

Суммировать

Совместимость миксина, упакованного выше, очень хорошая, в основном совместимы все мобильные телефоны,А еще я сделал совместимость на пк, пожалуйста, будьте уверены, чтобы использовать.

Конечно, может быть лучший способ, которого я не знаю.Если есть, пожалуйста, поправьте меня и оставьте сообщение, спасибо за чтение,Желаю всем больше и больше квалифицированной техники и больше и больше зарплат.