详解移动端Html5页面中1px边框的几种解决方法

问题提出

这是一个比较老的问题了,我第一次注意到的时候,是UI设计师来找我麻烦,emmm那时候我才初入前端职场,啥也不懂啊啊啊啊啊,情形是这样的:

设计师拿着手机过来:这些边框都粗了啊,我的设计稿上是1px的

我:????我写的是1px呀,不信你看。(说着拿出了css代码

设计师:不对啊我眼睛看来这个边框比我设计稿上粗很多,看起来好奇怪(emmm果然像素眼

我:那我把它改成0.5px你看看(边说边改了代码

设计师一看,点点头,果然好很多。

后来发现同样的代码在某些安卓机上是有问题的,会导致0.5px的线看不见。

奇了怪了,显然改成0.5px不能解决问题,但是确实1px边框看上去比设计稿上要粗很多,原因何在?

1px边框的表现

我直接使用css去定1px的边框,

html:

<ul class="hairlines">
  <li>1</li>
  <li>2</li>
</ul>

css:

* {
      margin: 0;
      padding: 0;
    }
    ul, li{
      list-style: none;
    }
    .hairlines {
      width: 300px;
      margin: 100px auto;
    }
    .hairlines li{
      position: relative;
      margin-top: 10px;
      border-bottom: 1px solid #cccccc; // 边框设置成1px
    }

得到的截图如下:

看上去是比设计稿上要粗很多,设计稿上的应该是下面这样的,大家可以比对一下:

解决方法一:伪类+transform

抱着解决问题的心理,虽然当时也没有想清楚原因在哪,但是还是找到了相关的解决方法,其中一些方法中提到使用边框图片border-image或者box-shadow,也可以模拟出想要的1px边框效果,但是我个人觉得不通用,也不是常规解决方法。

最终选择的是使用伪类+transform方法:原理是把原先元素的 border 去掉,然后利用 :before 或者 :after 重做 border ,并 transform 的 scale 缩小一半,原先的元素相对定位,新做的 border 绝对定位。

html同上

css如下:

    * {
      margin: 0;
      padding: 0;
    }
    ul, li{
      list-style: none;
    }
    .hairlines {
      width: 300px;
      margin: 100px auto;
    }
    .hairlines li{
      position: relative;
      border:none;
      margin-top: 10px;
    }
    .hairlines li:after{
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      background: #cccccc;
      width: 100%;
      height: 1px;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
    }

这样的话,画出的线确实细很多,我在之后长达一年的时间里面一般都是使用上面的方法去解决1px边框的问题,但用着用着,我发现了几个问题:

1.为什么是scaleY(0.5)?这个0.5是怎么得出的?是不是所有机型都是要scale缩小到一半,换句话说是不是通用?

2.如果我要同时画一个容器的四个边框怎么办?

3.支不支持圆角边框?

后两个问题改造一下上面的代码,可以找到解决方法(为了方便查看效果,我把平时写法得出的效果和使用伪类得出的效果放一起,这样更容易看出差别):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">
  <title>移动端1px边框问题</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul, li{
      list-style: none;
    }
    .lines {
      width: 200px;
      margin: 0 auto;
    }
    .lines li {
      border: 1px solid #cccccc;
      height: 50px;
      line-height: 50px;
      text-align: center;
      border-radius: 13px;
      margin-top: 10px;
    }
    .hairlines {
      width: 200px;
      margin: 0 auto;
      border-radius: 3px;
    }
    .hairlines li{
      height: 50px;
      line-height: 50px;
      border:none;
      text-align: center;
      position: relative;
      margin-top: 10px;
    }
    .hairlines li:after{
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      border: 1px solid #cccccc;
      border-radius: 26px;
      width: 200%;
      height: 200%;
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
      -webkit-transform-origin: left top;
      transform-origin: left top;
    }
  </style>
</head>
<body>
粗线
<ul class="lines">
  <li>1</li>
  <li>2</li>
</ul>
细线
<ul class="hairlines">
  <li>3</li>
  <li>4</li>
</ul>
</body>
</html>

详解移动端Html5页面中1px边框的几种解决方法

扫一扫手机访问