CSS3实现手机1px边框，细如发丝

前言

我们使用手机App的WebView和浏览器查看网页时，经常能看见那细如发丝的“0.5px”的边框、线条，让整个页面效果看起来更加细致。这里所谓的“0.5px”是如何实现的呢，web页面中最小的单位是1px,“0.5px”已经脱离了web定义的单位标准，如果直接使用“0.5px”那么它其实是以1px像素呈现。我在这里说下所谓的移动端“0.5px”像素实现方法，如果小弟理解的有什么错误，欢迎各位大神指点！！！

实现原理

1px像素如果只显示一半，那是否就是所谓的“0.5px”像素？问题的答案很相近，现在就来揭秘它的实现原理，CSS3提供了一个强大的属性，Gradients渐变，这个属性让前端拥有像设计师一样的能力，不需要PS就能绘制一幅五彩冰纷的彩色图。
CSS3 定义了两种类型的渐变（gradients）：
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义
我们这里需要用到的是线性渐变（Linear Gradients），如果让一天1px的线条实现上到下两种颜色的渐变，那么这条1px像素细线是否就拥有了2中颜色，如果有一种颜色为透明，那么是不是意味着它实现了所谓的“0.5px”.

devicePixelRatio（密度比）

解释完“0.5px”实现原理，这边需要再次提及devicePixelRatio这个属性&