最常用的1px解决方案

一、为什么会有1px问题

由于css也无法实现小数的px单位，所以才需要做一些处理

二、如何解决

最简单也最实用的方法就是，使用伪元素 分别写好上、下、左、右边框的伪元素

实现思路就是：

1、给需要加边框的元素设置position: relative;

2、加伪元素，给伪元素的初始大小为本元素的两倍，定位到到左上角。

3、给不同类名下的伪元素加不同位置的边框，再按左上角等比缩放2倍。

4、这样一个元素需要几个边框，就加几个类名就好

    <style>
        .border-left,
        .border-right,
        .border-top,
        .border-bottom
        {
   
            position: relative;
        }
        .border-left::after {
   
            position: absolute;
            top: 0;
            left: 0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            width: 200%;
            height