面试官：画一个边框宽度为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的方案才符合效果。
作者：krisking抗日时空
链接：https://juejin.cn/post/7005001846964092936