一个风雨交加的黑夜，程序员A兴高采烈地准备收拾行李回家。就在这时，手机突然震动了起来。小A下意识地想，一定是哪里不对。果然，发消息的是设计大佬。..设计师：小A，为什么这个0.5dp（0.5dp=1px）的边框比实际的要粗？不可能是粗的，我忘记了吗？）看完代码...小A：设计师，我这里已经写好了1px，他就是1px。不信你看看，可能会更粗手机h5会画粗1px吧？设计师老板：但是很多h5页面也有1px的边框。有转机）经过一番研究...小A恍然大悟原来很多人都遇到过1px的问题，网上也有很多解决办法，但是看着比较乱，没有说明原理。如果遇到了，怎么办？这是因为他有想法，何不自己整理一下，也方便大家记住1px的原理。在某个方向）这句话好像很难理解，可以结合下图（每个DPR上显示1px），一般我们拿到的h5的设计稿是750px，但是如果在DPR为2其实手机最小像素是用2*2px绘制的，这也导致了为什么1px比较粗。方案有很多种，这里给大家比较方案：方案优缺点使用0.5px实现简单代码，使用cssIOS和Android老设备不支持使用border-image实现兼容目前所有机型修改颜色不是很方便，通过viewport+rem来实现一套代码。所有页面都与0.5px相同。型号不兼容。使用伪类+transform来实现兼容。所有模型都不支持圆形框阴影模拟边框。兼容所有机型box-shadow不在boxModel中，需要注意预留位置。以上方案可以在网上找到例子。我这里只提供两个我经常用到的方案：box-shadowbox-shadow是我最常用的，除了Android4.4以下发现小于1p的不能显示阴影外，其他都还好//lowerborderbox-shadow:01px#E9E9E9;//fullborderbox-shadow:0-1px#D9D9D9,1px0#D9D9D9,01px#D9D9D9,-1px0#D9D9D9;//对于其他人，你可以查看API以使用伪类+转换了解有关此API的更多信息。目前京东的h5网页采用伪类+transform来实现//左边框。如果需要修改边框的位置，可以修改元素top、left、right、bottom的值可以是&::before{position:absolute;顶部：0；左：0；内容：'\0020';宽度：100%；高度：1px；border-top:1pxsolid#E9E9E9;变换原点：00；溢出：隐藏；}@media（-webkit-min-device-pixel-ratio：1.5）和（-webkit-max-device-pixel-ratio：2.49）{＆：：before{变换：scaleY（0.5）;}}@media(-webkit-min-device-pixel-ratio:2.5){&::before{变换：scaleY(0.33333)；}}市面上其他网页的处理方案参考了目前最前沿的技术和某宝的页面。发现某宝是使用div+width实现的，所以推断应该是某宝通过viewport+rem+div的方式，上面的某董使用伪类+transform实现了总结.有时对设计师来说严格一点是件好事。参考：https://main.m.taobao.com/https://m.jd.com/https://juejin.im/post/684490…https://www.kelede.win/posts/…
