移動端H5 實現0.5px邊框

此文章轉載自：https://blog.csdn.net/Love_your_life/article/details/80499334 

內容親測有效

專案中應設計師要求，1px的邊框覺得不精緻。。遂要實現0.5px邊框

   實現方式如下：

   偽類 + transform 實現

   單條border樣式設定：

    .scale-1px{
    position: relative;
    border:none;
    }
    .scale-1px:after{
    content: '';
    position: absolute;
    bottom: 0;
    background: #000;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    }

  四條boder樣式設定:

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

  支援圓角(偽類和本體類都需要加border-radius)；