Related source: github.com/any86/5a.cs…

What is “true 1px border “?

🚀 Since phones are now “high density screens “, the 1px we wrote on the phone will be displayed with 2/3 of the physical pixels, so the 1px border will look thicker, so if you think your 1px border is thicker, look down.

= = = = = = = = = = = = = = = = note = = = = = = = = = = = = = = = =

Screenshot because it may not be obvious when zoomed in, you can use your mobile phone to open these two urls and the comparison effect is very obvious:

= = = = = = = = = = = = = = = = note = = = = = = = = = = = = = = = =

A “silver bullet” solution

In fact, if you baidu “1px border “will have a lot of articles, most will say there are 7 methods, but in fact, after my test, in fact, we only need to be able to 1 of them, the following is the introduction of this” panacea “method.

First, how it works

  1. Mainly by adding to the target elementposition:relative;
  2. And then use its pseudo-class:afteror:beforeDraw an element twice as wide or three times as high;
  3. Then draw a 1px border around the pseudo-class element;
  4. throughmedia queryDecide to scale pseudo-class elements to 1/2 or 1/3;
  5. Add to pseudo-class elementspointer-events: none;, so that pseudo-class elements can be clicked through, that is, visible, but do not trigger any default events (click, etc.);

code

Function signatures

For ease of use, I encapsulated it as an SCSS mixin.

@mixin thinBorder($directionMaps: bottom, $color: #ccc.$radius: (0.0.0.0), $position: after)
Copy the code

Description:

$directionMaps: this is a list type that allows you to pass in multiple directions, which means you can generate multiple borders. The default value is bottom, so you can pass in as many as you want (top, left, bottom, right).

$color: border color, default # CCC;

$radius: fillet radius, default 0;

$position is an advanced setting and usually does not need to be changed. Since the thin border implementation uses CSS pseudo-classes, we can specify whether to use after or before. The default is after.

🤖 You can directly copy the code below to use in your project

Let’s look at the implementation of this code:

@mixin thinBorder($directionMaps: bottom, $color: #ccc.$radius: (0.0.0.0), $position: after) {
    // Whether there is only one direction
    $isOnlyOneDir: string==type-of($directionMaps);

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

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

    // Check whether the rounded corners are list or 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;

            // Remove 1 pixel density ratio under the border
            @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;
            }

            // Check whether the rounded corners are list or 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} @if(list==type-of(list==type-of(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); }}}Copy the code

use

Unilateral border

Border-top-1px; border-top-1px;

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

More than the side frame

Border-left-red: 1px; border-top-left-red: 1px

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

The rounded edges

Generate a border-top-left-round-1px border with 100px rounded corners

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

use:beforeTo generate a border

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

Ios supports fractional pixels

In ios8 and above, it is possible to use a small border, such as border-width:0.5px, but Android does not support it, so if you only need to be compatible with ios, you can use decimal. But I recommend using the mixin above because it’s just as easy.

conclusion

The compatibility of the mixin package above is very good. It is compatible with almost all mobile phones, and I also made it compatible with PC. Please rest assured that you can use it.

Of course, there may be a better method is I do not know, if there is also please comment, thank you for reading, I wish you more and more strong technology, salary more and more.

Related source: github.com/any86/5a.cs…

WeChat group

Thank you for reading, if you have any questions, you can add the group 🚀, there are a lot of interesting front end partners in the group, let’s learn and grow together!

Add my wechat, and I will pull you into the wechat group (because Tencent restricts the number of wechat groups to 100, I must pull you into the group after the number exceeds 100).