retina（高清屏）下1px线的实现

Retina 屏下，无法很好的展示真正的 1px 物理像素线条

设计师想要的 retina 下 border: 1px，其实是 1 物理像素宽，而不是 1 CSS 像素宽度，对于 CSS 而言：

    1. 在 dpr = 1 时，此时 1 物理像素等于 1 CSS 像素宽度；

    2. 在 dpr = 2 时，此时 1 物理像素等于 0.5 CSS 宽度像素，可以认为 border- 1px 这里的 1px 其实是 1 CSS像素宽度，等于 2 像素物理宽度，设计师其实想要的是 border- 0.5px;

    3. 在 dpr = 3 时，此时 1 物理像素等于 0.33 CSS 宽度像素，设计师其实想要的是 border: 0.333px;

*  并不是所有手机浏览器都能识别 border- 0.5px，在 iOS7 以下，Android 等其他系统里，小于 1px 的单位会被当成为 0px 处理;

解决方法：

• 渐变实现
• 使用缩放实现
• 使用图片实现（base64）
• 使用SVG实现（嵌入 background url）

Demo