面试官：画一个边框宽度为0.5px的正方形叭。

我们知道在写移动端页面时，有个经典的1px问题。该问题的原因是：在pc端的设计稿拿到移动端会产生视觉上的放大，解决该问题的方案就是将1px缩小为0.5px。

解决方法

1.直接写0.5px，不兼容。 2.transform的scale。 3.linear-gradient，渐变。 4.SVG。 5.box-shadow。 6.meta中的viewport。

实现

在上述方案中效果最好，最常用的是transform的缩放，接下来我们就看看是怎么实现的叭。

     
        .box1 {
            background: none;
            margin-top: 10px;
            margin-left: 200px;
            height: 100px;
            width: 100px;
            border: 0.5px solid #000;
        }

        .box2 {
            position: relative;
            margin: 10px 0 0 200px;
            border: none;
            background: none;
            height: 100px;
            width: 100px;
        }

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

    <div class="box"></div>
    <div class="box1"></div>
    <div class='box2'></div>

使用伪元素给box2添加边框。注意这里要添加transform-origin: left top;不然盒子会偏移中心。

这是在pc端的效果，是不是感觉直接设置为0.5px，反而会更细呢。但是我们再看看移动端的情况。

在移动端只有缩放0.5的方案才符合效果。

---

记录记录！