有关单像素显示的问题，请参考从1px像素问题分析像素和RevealingViewport和iPhone6Screen。解决方法如何解决1px显示问题可以参考博客7种方法解决手机Retina屏1px边框问题。解决方案/优缺点兼容性颜色圆角总结0.5px边框不兼容Android设备，iOS8以下设备。支付支持简单，不需要太多代码。使用border-image不必修改颜色。替换图片的圆角需要特殊处理，并且边缘会模糊。可以设置单条或多条边框，不存在性能瓶颈问题。使用background-image实现没有颜色修改的麻烦。您需要更换图像。圆角需要特殊处理，边缘会模糊。可以设置单个或多个边框，但不存在性能瓶颈问题多背景渐变实现多背景图片兼容性问题支持不支持可以实现单个或多个边框，边框的颜色可以随意设置，但是代码量很多使用box-shadow模拟边框没有边框有阴影，颜色变浅支持代码少，可以满足所有场景。viewport+rem实现暂不支持，所有场景均可满足。一套代码可以兼容基本所有的布局，但是老项目的修改成本太高，所以只适用于新项目的伪类+transform实现不支持支持（伪类和本体类都需要添加border-radius）所有场景都可以满足。对于已经使用伪类的元素（比如clearfix），可能需要多层嵌套测试实例一个像素分割线一个像素分割线（viewport+rem实现）one-pixelborderone-pixelborder（viewport+rem实现）)bestpractice如果公司已经有成熟的“viewport+rem”实现，那么就没有必要考虑一个像素的问题。对于没有采用该方案的项目，可以结合“0.5px边框”和“伪类+transform实现”的实现方案。在HTML的header标签中添加0.5像素的检测脚本（放在head中以避免在屏幕上闪烁）('div');testElement.style.border='.5pxsolidtransparent';fakeBody.appendChild(testElement);docEl.appendChild(fakeBody);if(testElement.offsetHeight===1){docEl.classList.add('细线');}docEl.removeChild(fakeBody);根据选择器.hairlines和设备像素比设置预定义公共样式/*分割线*/.line-bottom,.line-left,.line-right,.line-top{position:relative;}.line-top::before,.line-bottom::after{内容：'';位置：绝对；左：0；高度：1px；宽度：100%；背景色：#e8e8e8;}.line-left::before,.line-right::after{content:'';位置：绝对；顶部：0；宽度：1px；高度：100%；背景颜色：#e8e8e8;}。line-top::before{top:0;}.line-bottom::after{bottom:0;}.line-left::before{left:0;}.line-right::after{right:0;}.hairlines.line-top::before,.hairlines.line-left::before,.hairlines.line-right::after,.hairlines.line-bottom::after{transform:none;}.hairlines.line-top::before,.hairlines.line-bottom::after{高度：0.5px;}.hairlines.line-left::before,.hairlines.line-right::after{宽度：0.5px;}@media(-webkit-min-device-pixel-ratio:2){.line-top::before,.line-bottom::after{transform:scaleY(0.5);}.line-left::before,.line-right::after{transform:scaleX(0.5);}}/*由于有些颜色比较淡，按实际比例缩放可能会导致分界线不清晰，所以可以根据具体需要决定是否按实际像素比例缩放*//*@media(-webkit-min-device-pixel-ratio:3){.line-top::before,.line-bottom::after{变换:scaleY(0.333333);}.line-left::before,.line-right::after{转换：scaleX(0.333333);}}*//*Border*/.border{position:relative;}.border::after{content:"";位置：绝对；顶部：0；左：0；边框：1px实心#e8e8e8；框大小：边框框；宽度：100%；高度：100%；transform-origin:lefttop;}.hairlines.border::after{display:n一个;}.hairlines.border{border:0.5pxsolid#e8e8e8;}@media(-webkit-min-device-pixel-ratio:2){.border::after{width:200%;高度：200%；变换：比例（0.5）；}}/*@media(-webkit-min-device-pixel-ratio:3){.border::after{width:300%;高度：300%；变换：比例（0.333333）；}}*/OnePixelDisplay-BestPracticeReferenceiPhone6ScreensDemystified/iPhone6ScreensDemystified从1px像素问题来分析像素和viewport7种解决移动Retina屏幕1px边框问题的方法Mobileweb1pixelborder看大公司Retina屏幕的移动设备如何实现真正的1px线条？说说mobilewebretina下的1pxborder解决方案
