如何绘制0.5像素的边框

方法一

直接设置border: 0.5px solid #ccc;
优点：代码简单
缺点：不兼容Android

方法二

border: 1px solid #ccc;
transform: scale(0.5);
优点：代码简单
缺点：Android上显示效果差

方法三

        /* 盒子 */
         .box {
             position: relative;
             width: 300px;
             height: 200px;
             border-radius: 4px;
             /* background-color: red; */
         }
         .box::after {
             content: '';
              position: absolute;
              top: 0;
              left: 0;
              width: 200%;
              height: 200%;
              border-radius: 8px;
              border: 1px solid royalblue;
              transform: scale(0.5);
              transform-origin: 0 0;
              pointer-events: none;
         }

优点：ios，Android都兼容，且显示效果佳
缺点：代码较多，略微复杂

显示效果