移动端1px边框解决方案-优快云博客

本文链接：https://blog.youkuaiyun.com/cvper/article/details/80097384

pc端你写一个边框 1px ,那就是1px 没什么异常，移动端可能在这个机器上细一点，那个机器上粗一点，

这就产生了问题，原因主要是屏幕的类型造成的，原因这里不探讨，只看解决方案：

先看看下面这两种方案：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .test {
            width: 100px;
            height: 50px;
            border: 1px solid #000;
            margin: 0 auto;
        }

        .a1 {
            width: 100px;
            height: 50px;
            border: 0.5px solid #000;
            margin: 0 auto;
            margin-top: 5px;
        }

        .a2 {
            width: 100px;
            height: 50px;
            border: 1px solid #fff;
            border-bottom: 1px solid #000;
            box-shadow: 0 1px 1px #fff;
            margin: 0 auto;
            margin-top: 5px;
        }

        .a3 {
            width: 100px;
            height: 50px;
            box-shadow: inset 0px -1px 1px -1px #000;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="test">常規設置1px像素</div>
    <div class="a1">0.5px</div>
    <div class="a2">box-shadow遮蓋</div>
    <div class="a3">box-shadow凹陷</div>
</body>

</html>

效果图：（iPhone 5s）

首先 A是正常情况下设置 1px 的时候显示的样式；

其次 B是设置0.5px的情况下显示的样式；（不是所有的机型都支持0.5px 这里只是用来对比）

然后 C是使用box-shadow遮盖border 实现的样式，这个方法我在网上看到，不过实际看来

一点效果没有，应该是个错误的方法吧，不做深究，有知道的小伙伴可以教教我，不胜感激；

最后 D是利用凹陷实现的边框，宽度没有问题，相当好了，但是可以看出，相较于正常的0.5px的

显示颜色上淡了一些，这是个缺点；

上面的两种方法证明利用凹陷实现1px 的边框是OK的，可以用的，仅此而已；下面再看看其它的方法：

这个方法是我在腾讯财经上看到的，来看看：效果图和代码部分

这个效果是利用transform:scale() 进行缩放产生 1px 的效果；

下面我们利用这个方法实现以下看看效果怎么样：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .test {
            width: 100px;
            height: 50px;
            border: 1px solid #000;
            margin: 0 auto;
        }

        .a1 {
            width: 100px;
            height: 50px;
            border: 0.5px solid #000;
            margin: 0 auto;
            margin-top: 5px;
        }

        .a2 {
            width: 100px;
            height: 50px;
            border: 1px solid #fff;
            border-bottom: 1px solid #000;
            box-shadow: 0 1px 1px #fff;
            margin: 0 auto;
            margin-top: 5px;
        }

        .a3 {
            width: 100px;
            height: 50px;
            box-shadow: inset 0px -1px 1px -1px #000;
            margin: 0 auto;
        }

        .a3::after{
            position:relative;
            top:40px;
            content:'';
            display:block;
            background: #000;
            width:200px;
            height:1px;
            transform:scaleY(0.5)
        }
    </style>
</head>

<body>
    <div class="test">常規設置1px像素</div>
    <div class="a1">0.5px</div>
    <div class="a2">box-shadow遮蓋</div>
    <div class="a3">box-shadow凹陷</div>
    <div class="a4">利用transform:scale()</div>
</body>

</html>

显示效果：

可以看出这种方法也是OK的；

我们这里只是简单表现了一下一个1px 的线条如何实现，但是上面的线条位置并不是我想要的，或者说

我想实现的是div的四周边框1px 的线，下面再完整的实现一下：

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,
          minimum-scale=1,user-scalable=no">
       <title>Document</title>
       <style>
           .test {
               position: relative;
               width: 100px;
               height: 200px;
           }

          .test::after {
               content: "";
               box-sizing: border-box;
               position: absolute;
               left: 0;
               top: 0;
               border: 1px solid #000;
               width: 200%;
               height: 200%;
               transform: scale(0.5);
               transform-origin: 0 0;
          }

        .abc {
              width: 100px;
              height: 200px;
              border: 1px solid #000;
        }
     </style>
  </head>
  <body>
    <div class="test">奥术大师多所多</div>
    <p class="abc"></p>
  </body>
</html>