1. 程式人生 > >移動端寫0.5px邊框

移動端寫0.5px邊框

   專案中應設計師要求,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);