先介绍下多倍屏
多倍屏是指1个逻辑像素对应多个物理像素。在2倍屏下，1个逻辑像素就对应2个物理像素；在3倍屏下，1个逻辑像素就对应3个物理像素。正如我们的标准设计稿尺寸是7501334(也就是iphone6、7、8能够显示的像素)，虽然我们的iphone6、7、8的屏幕尺寸是375667，但屏幕是2倍屏，所以可以显示的实际像素是750*1334。常见的2倍屏是iphone6、7、8，常见的3倍屏是iphone6plus、7plus、8plus。
1px像素问题
1px像素问题来了，在多倍屏下逻辑上的1像素显示的多个物理像素。那么解决方案也就来了。如在两倍屏下，1个CSS像素对应2个物理像素， 那么我们只需要想办法把border的宽度变为0.5px, 那么展现就是1个物理像素了，也就能解决1px像素问题了。
解决方案
1.线性渐变：
2.使用伪元素绘制border + 根据多倍屏进行缩放 和 设置border宽度为小数（仅ios支持）
解法对比及优缺点
不同类型的优缺点背景渐变border的宽度为小数伪元素+缩放优点使用简单，可以设置多条边简单方便可以适配任意多倍屏缺点只能解决两倍屏Ios支持android不支持代码稍微繁琐
延伸及扩展问题回答参考
还有多种其他解决1px像素的方案，常见的如：viewport缩放+rem布局，border-image，box-shadow等，这些方案都会有些自己的局限性，可以参考下面的链接做进一步研究
项目中体现经验的点
为了更好的还原设计稿，我们需要兼容各种多倍屏，这样可以使我们的页面看起来更加美观、优雅
