移动端1px边框解决方案

一、在retina屏中，像素比为2(iPhone6/7/8)或3(iPhone6Plus/7Plus/8Plus)，1px的边框看起来比真的1px更宽。

使用伪类加transform的方式
元素本身不定义边框，伪元素定义1px边框，并且根据根据像素比值设置缩放比例，像素比为3时设置为0.33，像素比为2时设置0.5。
HTML:

CSS:
.border-1px {
position: relative;
}

.border-1px:after {
position: absolute;
content: “”;
top: -50%;
bottom: -50%;
left: -50%;
right: -50%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
border-top: 1px solid #666;
}

@media (-webkit-min-device-pixel-radio: 3), (min-device-pixel-radio: 3) {
border-1px::after {
-webkit-transform: scaleY(0.33333333);
transform: scaleY(0.33333333);
}
}

@media (-webkit-min-device-pixel-radio: 2), (min-device-pixel-radio: 2) {
border-1px::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
当直接设置边框1px时

HTML:

CSS:
.border-1px {
border-top: 1px solid #666;
}

二、box-shadow

.line-box-shdow{
height: 1Px;
background: none;
box-shadow: 0 1px 0 #e1e1e1;
}

优点：看起来是比较细
缺点：在ios上看起来比较模糊

三、line-gradient，一半白色，一半黑色，让边距变小

.line-gradient{
height: 1Px;
background:linear-gradient(0deg, #fff, #000);
}

优点：基本能实现
缺点：线比较虚
四、推荐
/* 下边框1px设置 */
.box_1px{
box-shadow: 0 1px 1px -1px rgba(151, 151, 151, 0.8);
-webkit-box-shadow: 0 1px 1px -1px rgba(151, 151, 151, 0.8);
}

第一条class是.box_1px，下面小红是1px
优点：基本能实现
缺点：线比较虚