Recording moving end - 0.5px

On the PC side with 1px border line looks okay, but in the end looks very ugly phone; iphone can be set border:solid 0.5px red;; android will 0.5px regarded 0px, that is no border states;

2. Use css3 new property scale

Need to add a border element into a pseudo-class, the class pseudo absolute positioning, width and height is set to 200%, and then scaled to 0.5, the nature is 0.5px

<div class="test1"></div>

.test1{
  width: 100px;
  height: 100px;
  position: relative; 
}
.test1::after{
    content:"";
    width:200%;
    height:200%;
    position:absolute;
    top:0;
    left:0;
    border:1px solid red;
    -webkit-transform : scale(0.5);
            transform : scale(0.5);
    -webkit-transform-origin : 0 0;
            transform-origin : 0 0;
    box-sizing: border-box;    
}
复制代码

Side effects - - - bonus question is very important Oh!

When the border 0.5px realized with absolute positioning pseudo-classes, we test1click on the event class fail, so at this pseudo-classes is absolute positioning, and the length and width equal to the length and width of the parent element, is out of the document flow covering the parent class, pseudo-class is not real DOM elements.

Solution

Write a absolutely positioned elements, covering the parent element level z-indexpriority to be higher

<div class="test1"></div>

.test1{
  width: 100px;
  height: 100px;
  position: relative; 
}
.test1::after{
    content:"";
    width:200%;
    height:200%;
    position:absolute;
    top:0;
    left:0;
    border:1px solid red;
    -webkit-transform : scale(0.5);
            transform : scale(0.5);
    -webkit-transform-origin : 0 0;
            transform-origin : 0 0;
    box-sizing: border-box;    
}
.click-test1{
position:absolute;
top:0;
left:0;
z-index:10;
}
复制代码

2. Usebackground-image

Using a linear-gradient background gradient is achieved, specific code as follows:

.test1 {
    background-image: -webkit-linear-gradient(0deg,red,red 50%,transparent 50%);
    background-image : linear-gradient(0deg,red,red 50%,transparent 50%);
    background-size: 100% 1px;
    background-repeat: no-repeat;
}
复制代码

analysis

`Linear-gradient` default direction from top to bottom, from 0deg to 50% of local color is the border color, then the lower half of the color is transparent - no color. The reason why the two intermediate written together 50%, because the color transitions so that no gradient effect, and looks more like a line entirely; then the key is below the `background-size: 100% 1px; `, width is 100%, but the height is 1px, 1px note here naturally css pixel, plus the upper side` background-image`, the practical effect is that half of the color, not that half 0.5px, then remove the ` repeat`, it is realized.

If you want to write the same way border-leftor border-rightthe same principle, only to change direction on it.

direction:0deg 、90deg 、180deg 、-90deg

Shortcoming

Can only do one-way `border`, if there is a button to add, but also rounded corners, it is powerless

3. Use box-shadowan analog border

Use css way to achieve shading effects 0.5px style settings:

.box-shadow-1px {
box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}
// 0px：代表垂直方向。 0代表无线段 1px代表左面 -1px代表右面
-1px：代表水平方向。 0代表无线段 1px代表上面 -1px代表下面
后面的两个分别代表[模糊距离][阴影的大小] 无须改动
复制代码

References:

1. Summary css achieve various lines of 0.5px
2. 1px? 0.5px!
3. Several methods moving end drawing 0.5 pixels (finishing) 4. 7 ways to solve the moving end frame problems 1px Retina screen 5. "Flexible implemented using ADS H5 terminal adapter hand page"

Reproduced in: https: //juejin.im/post/5cfa2ce9e51d454fbf5409c5