相关源码：https://github.com/any86/5a.c...什么是“true.1pxborder”？由于现在手机都是“高密屏”，我们写的1px会用手机上的2/3个物理像素来显示，这样1px的边框看起来会比较粗，所以如果你也觉得你的1px边框比较粗，那么请往下看================注意=======================================================================================================================================注意===================“十金油”的解决方法百度一下“1pX边框”其实会有很多文章》，大部分人会说有7种方法，但实际上，经过我的测试，其实我们只需要知道其中一种即可。下面就是这“灵丹妙药”的做法。一、原理主要是添加position:relativetothetargetelement;然后使用它的伪类：after或:before绘制一个2倍或3倍宽高的元素；然后为伪类元素画一个1px的边框；通过媒体查询决定将伪类元素缩放到1/2或1/3；给伪类元素添加pointer-events:none;，使得伪类元素可以被点击通过，也就是可以被看到，但是不会触发任何默认事件（点击等）；代码函数签名为了方便，我封装为scssmixin.@mixinthinBorder($directionMaps:bottom,$color:#ccc,$radius:(0,0,0,0),$position:after)说明：$directionMaps：是一个列表类型，可以传入多个方向，即可以生成多个防御边界，默认值为bottom，可以根据自己的情况传入(top,left,bottom,right)4个方向需要；$color：边框的颜色，默认为#ccc；$radius：圆角半径，默认0；$position是高级设置，一般不需要更改。由于细边框的实现使用了css的伪类，为了避免可能的样式冲突，我们可以指定是使用:after还是:before，默认为after；你可以直接将下面的代码复制到你的项目中，使用下面的代码来查看代码的实现：@mixinthinBorder($dirsectionMaps:bottom,$color:#ccc,$radius:(0,0,0,0),$position:after){//是否只有一个方向$isOnlyOneDir:string==type-of($directionMaps);@if($isOnlyOneDir){$directionMaps:($directionMaps);}@each$directionMapin$directionMaps{border-#{$directionMap}:1pxsolid$color;}//判断圆角是list还是number@if(list==type-of($radius)){border-radius:nth($radius,1)nth($radius,2)nth($radius,3)nth($radius,4);}@else{border-radius:$radius;}@mediaonlyscreenand(-webkit-min-device-pixel-ratio:2){&{position:relative;//删除像素密度比为1的边框@each$directionMapin$directionMaps{border-#{$directionMap}:none;}}&:#{$position}{内容：“”；位置：绝对；顶部：0；左：0；显示：块；宽度：200%；高度：200%；变换：比例（0.5）；框大小：边框框；填充：1px；变换原点：00；指针事件：无；边框：0实心$color；@each$directionMapin$directionMaps{border-#{$directionMap}-width:1px;}//判断圆角是list还是number@if(list==type-of($radius)){border-radius:nth($radius,1)*2nth($radius,2)*2nth($半径,3)*2nth($radius,4)*2;}@else{边界半径：$radius*2;}}}@mediaonlyscreenand(-webkit-min-device-pixel-ratio:3){&:#{$position}{//判断圆角是list还是number@if(list==type-of($radius)){border-radius:nth($radius,1)*3nth($radius,2)*3nth($radius,3)*3nth($radius,4)*3;}@else{border-radius:$radius*3;}宽度：300%；高度：300%；变换：比例（0.33）；}}}使用单边边框生成4个单边边框如.border-top-1px；@each$dirin(top,right,bottom,left){.border-#{$dir}-#{1}px{@includethinBorder($dir);}}多边边框生成“红色”多边边框.border-top-left-red-1px.border-top-left-red-1px{@includethinBorder((top,left),red);}roundedborder生成一个带有100px圆角的边框。border-top-left-round-1px.border-top-left-red-1px{@includethinBorder(top,red,100px);}使用:before生成边框。border-top-before{@includethinBorder(top,red,0,before);}ios支持小数点像素，其实ios8及其以上都支持小数点像素，也可以实现细边框，比如border-width:0.5px，但是安卓不支持，所以如果只需要兼容ios即可，其实可以直接用小数作为单位。不过我还是推荐使用上面的mixin，毕竟省心的效果也是一样的。综上所述，上面打包的mixin兼容性很好，基本上所有手机都兼容，PC端我也做了兼容，大家放心使用。当然，可能还有更好的方法。不知道，有知道的请指正并留言。感谢您阅读。祝大家技术更好，工资更高。相关源码：https://github.com/any86/5a.c...感谢阅读微信群，有问题可以加群吗，里面有很多有趣的前端小伙伴集团，让我们一起学习，一起成长！也可以加我微信，我拉你进微信群（由于腾讯支持微信群有100人限制，超过100人必须拉我）
