一、transform:scale
使用伪类 :after 或者 :before 创建 1px 的边框，然后通过 media 适配不同的设备像素比，然后调整缩放比例，从而实现一像素边框
首先用伪类创建边框
.border-bottom{position: relative;border-top: none !important;
}.border-bottom::after {content: " ";position: absolute;left: 0;bottom: 0;width: 100%;height: 1px;background-color: #e4e4e4;-webkit-transform-origin: left bottom;transform-origin: left bottom;
}
然后通过媒体查询来适配
/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {.border-bottom::after {-webkit-transform: scaleY(0.5);transform: scaleY(0.5);}
}/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {.border-bottom::after {-webkit-transform: scaleY(0.33);transform: scaleY(0.33);}
}
这种办法的边框并不是真正的 border，而是高度或者宽度为 1px 的块状模型，所以这种办法不能做出圆角，一般都用来画分割线
)