Achieve retina (HD screens) under 1px line

Under Retina screen, not very good display of real physical pixel lines 1px

Under the designers wanted Retina , in fact, it is a physical pixels wide , instead of 1 CSS pixel width , for the CSS in terms of: border: 1px

 

    1. When dpr = 1, this time a physical pixel pixel width equal to the CSS 1;

    2. In dpr = 2, case 1 is equal to 0.5 CSS physical pixel width of a pixel, can be considered  border-width: 1px 1px here is actually the CSS 1 pixel width equal to the physical width of 2 pixels, the designer is actually desired  border-width: 0.5px;

    3. In dpr = 3, at this time a physical pixel width of a pixel is equal to 0.33 CSS, designers want is actually border: 0.333px;

 

* Not all browsers recognize the phone  border-width: 0.5px, in the following iOS7, other systems such as Android, the units will be less than 1px 0px when to be treated;

Solution:

• Gradual realization
• Use the zoom to achieve
• Use pictures to achieve (base64)
• Use SVG in (embedded background url)

Demo