乐趣区

关于css3:移动端1px解决方案

jiezi

在挪动端 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 不胜感激！

退出移动版