1像素问题

边框宽度设置.5不生效, box-shadow可以
retina屏的1个像素实际占了4个像素的位置

 <style>
        div {
            width: 100px;
            height: 100px;
            margin: 3%;
            padding: 5px;
        }
  
        .box1 {
            border: 1px solid red;
        }

        .box2 {
            position: relative;
        }
        /* 伪元素画边框 */
        .box2:before {
            content: "";
            position: absolute;
            width: 200%;
            height: 200%;
            border: 1px solid #09F;
            transform: scale(.5);
            left: -50%;
            top: -50%;
        }
        /* 阴影画边框线 */
        .box3 {
            box-shadow: 0 0 0 .5px #05F 
        }
    </style>
</head>

<body>
    <div class="box1">

    </div>
    <div class="box2">

    </div>
    <div class="box3">

    </div>

实现效果