A practical scheme of realizing 0.5px on mobile terminal

 We know , Theoretically px The smallest unit of is 1, But in setting px When the value of , Set up directly 0.5px There are great differences between different browsers , And we can see that different browsers of different systems have different effects on the decimal point px There are different treatments .Chrome Will be able to 0.5px Rounding becomes 1px, The less than 0.5px As 0,Firefox Will not be less than 0.55px As a 1px,Safari Is not less than 0.75px As a 1px. So the following summarizes the implementation 0.5px How to implement .

 programme 1:  Pseudo elements +scale ( Best compatibility , recommend )
 Realization way ： Set pseudo elements for containers , Set absolute positioning , Width and height are 200%, The border is 1px, And then use transform:scale(0.5)  Let pseudo elements shrink by half , At this time, the border of the pseudo element coincides with the edge of the container .

 programme 2:  Pseudo elements + background  ( Suitable for setting a border , There is no way to show rounded corners )
 Realization way ： Set pseudo elements for containers , Set absolute positioning , Height 1px, Set linear gradient for background image , Half colored, half transparent , Visually only 0.5px.

 programme 3:  Use shadows instead of borders 
 characteristic ： convenient , Can display rounded corners normally , And it can be achieved 0.1px Wait for a thinner border , Compatibility is OK .

 Code implementation 

<style>
	.box {
	    width: 360px;
	    height: 50px;
	    border-radius: 5px;
	    margin-top: 20px;
	    line-height: 50px;
	}
	
	/*  Set up directly border-width */
	.box-normal {
	    border: 0.5px solid red;
	}
	
	/*  programme 1： Pseudo elements +scale */
	.box1 {
	    position: relative;
	}
	.box1::after {
	    position: absolute;
	    bottom: 0;
	    z-index: -