在移动端适配中，1 像素边框高清如何实现？

目录

1、淘宝实现方式 transform: scale(0.5)

2、对阴影处理 box-shadow

3、图片实现 background-image

---

1、淘宝实现方式 transform: scale(0.5)

实现方法：

淘宝的实现方式即 rem+viewport 缩放来实现。transform: scale(0.5)

CSS代码：

div {
    width: 1px;
    height: 100%;
    display: block;
    border-left: 1px solid #e5e5e5;
    -webkit-transform: scale(.5);
    transform: scaleX(.5);
}

缺点：

圆角无法实现，实现4条边框比较麻烦，并且只能单独实现。如果嵌套，会对包含的效果产生不想要的效果，所以此方案配合:after和before独立使用较多。

2、对阴影处理 box-shadow

实现方法：

利用CSS对阴影处理的方式实现0.5px的效果。

CSS代码：

-webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);

优点：

基本所有场景都能满足，包含圆角的button，单条，多条线。

缺点：

颜色不好处理， 黑色 rgba(0,0,0,1) 最深的情况了。有阴影出现，不好用。
大量使用box-shadow可能会导致性能瓶颈。
四条边框实现效果不理想。

3、图片实现 background-image

实现方法：

使用 background-image 实现1px有两种方式：

① 渐变 linear-gradient 或直接使用图片(base64)

② 渐变 linear-gradient (50%有颜色，50%透明)

单条线：

div {
    height: 1px;
    background-image:-webkit-linear-gradient(top,transparent 50%,#000 50%);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 100% 1px;
}

多条线：

div {
    background-image: -webkit-linear-gradient(top,transparent 50%,#000 50%),
    -webkit-linear-gradient(bottom, transparent 50%, #000 50%),
    -webkit-linear-gradient(left, transparent 50%, #000 50%),
    -webkit-linear-gradient(right, transparent 50%, #000 50%);
    background-size: 100% 1px,100% 1px,1px 100%,1px 100%;
    background-repeat: no-repeat;
    background-position: top left, bottom left, left top, right top;
}

优点：

可以设置单条,多条边框；可以设置颜色

缺点：

大量使用渐变可能导致性能瓶颈；代码量大；多背景图片有兼容性问题