在挪动端web页面中，1px的问题是一个常见的问题，总结一些解决挪动端web的1px办法以及对应API介绍
border-image
border-image CSS属性容许在元素的边框上绘制图像
语法
border-image: image-source image-height image-width image-repeat复制代码设置1px
.border-top { border-width: 1px; border-image: url('xxx') 2 repeat;}复制代码应用 border-image 时，其将会替换掉border-style 属性所设置的边框款式。尽管标准要求应用 border-image时边框款式必须存在，但一些浏览器可能没有实现这一点。
特地留神，若 border-image-source（此值可用border-image-source或border-image简写设置) 的值为 none 或者图片不能显示，则将利用 border-style
长处：兼容性好
毛病：灵活性差，每次更改都须要更换图片
linear-gradient
利用突变实现1px，50%彩色，50%通明
.border-top { background: linear-gradient(1deg, black, black 50%, transparent 50%) top left / 100% 1px no-repeat;}复制代码长处：实现简略，色彩可控
毛病：无奈实现圆角，有兼容性问题（当初兼容性问题根本可疏忽）
box-shadow
box-shadow 属性用于在元素的框架上增加暗影成果，能够在同一个元素上设置多个暗影成果，并用逗号将他们分隔开。该属性可设置的值包含暗影的X轴偏移量、Y轴偏移量、含糊半径、扩散半径和色彩。
在应用box-shadow时，须要留神不同数量的属性值代表不同的含意
如果只存在两个属性值，会将其作为offerset-x和offerset-y
如果存在三个属性值，会将前两位作为offerset-x和offerset-y，第三个值作为blur-radius
如果存在四个属性值，第四个将会作为spread-radius
.border-top {
box-shadow: 0px -1px 1px -1px rgb(0 0 0 / 50%);
}
复制代码
长处：实现简略，色彩可控
毛病：色彩管制较为难拿捏，会有暗影描边呈现
伪元素 + transfrom
如果间接对DOM应用transfrom进行缩放，会连带着外部的所有元素被缩放，影响原有的布局构造和字体大小，应用伪元素遍能够防止这个问题，因为伪元素::after或::before是独立于以后元素，能够独自对其缩放而不影响元素自身的缩放
.border-top { position: relative;}.border-top::after { content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: 1px solid #000; transform: scaleY(.5); transform-origin: left top;}复制代码因为当初市面存在多种DPR设施，上述代码不能很好的兼容，因而须要搭配媒介查问应用，针对不同的DPR设施进行缩放
@media screen and (-webkit-min-device-pixel-ratio: 2) { .border-top::after { /* 省略无关代码 */ transform: scaleY(.5); }}@media screen and (-webkit-min-device-pixel-ratio: 3) { .border-top::after { /* 省略无关代码 */ transform: scaleY(1 / 3); }}最初
如果你感觉此文对你有一丁点帮忙，点个赞。或者能够退出我的开发交换群：1025263163互相学习，咱们会有业余的技术答疑解惑
如果你感觉这篇文章对你有点用的话，麻烦请给咱们的开源我的项目点点star: https://gitee.com/ZhongBangKeJi/CRMEB不胜感激 ！