使用CSS 绘制出 1px 的边框，在移动端上渲染的效果会出现不同，部分手机发现1px 线条变胖了，这篇文章整理2种方式实现1px 像素线条。1、利用box-shadow + transform；2、利用border + 伪元素 + transform

我们在开发移动端web项目时经常遇到设置border:1px，但是显示的边框却为2px或是3px粗细，这是因为设备像素比devicePixelRatio为2或3引起的。

在移动端web开发过程中，如果你对边框设置border：1px，会发现，边框在某些手机机型上面显示的1px比实际感觉会变粗，这也就是1像素问题。如下图是对桌面浏览器和移动端border设置1px的比较。那么是什么导致这种原因的呢？