Example code for CSS to implement a 0.5-pixel border

The designers of the company were designed with iphone6 (750 physical pixels wide) as the basis for the design drawings. Iphone6 's device pixel ratio (that is, the ratio of CSS pixels to physical pixels) is 2, so the designer designs a box with a 1px border, which is 0.5 pixels relative to the CSS code.

For this problem, the most intuitive way is the CSS directly set the border is 0.5px, tested, the iphone can be normal display, Android under almost all browsers will recognize 0.5 as 0, that is, no border state, so this method does not work

CSS3 has the properties of scaling, we can use this property, reduce the 50% 1px border, to achieve this function, the implementation code is as follows

<p class= "Border3" >    <p class= "Content" > Pseudo-Class settings Border </p></p>

Css:

. border3{     position:relative;           }. border3:before{       content: ';       Position:absolute;       width:200%;       height:200%;       border:1px solid red;       -webkit-transform-origin:0 0;       -moz-transform-origin:0 0;       -ms-transform-origin:0 0;       -o-transform-origin:0 0;       transform-origin:0 0;       -webkit-transform:scale (0.5, 0.5);       -ms-transform:scale (0.5, 0.5);       -o-transform:scale (0.5, 0.5);       Transform:scale (0.5, 0.5);       -webkit-box-sizing:border-box;       -moz-box-sizing:border-box;       Box-sizing:border-box;}

Implementation ideas:

1. Set the reference position of the target element

2, add a pseudo element to the target element before or after, and set the absolute positioning

3. Add 1px border to pseudo-element

4, with the Box-sizing:border-box properties of the border are wrapped in width and height inside

5, width and height set to 200%

6, the entire box model reduced to 0.5

7, adjust the position of the box model, the upper left corner as the benchmark transform-origin:0 0;

The implementation results are shown on the iphone as follows:

The above is the CSS implementation of the 0.5-pixel border of the sample code, I hope to help everyone.