如何用css3畫一根優雅的0.5px細線

利用細線佈局、區分頁面是常用的手段。一般UI爲了美觀都會採用 0.5 px 而不是 1px 的細線。而這就造成了問題：由於屏幕和設計稿的分辨率轉換，如果在border中直接定義爲0.5 px, 會造成有時候細線被抹殺成 0 px，從而看不到， 如果定義爲 1px， 則實際顯示的時候會變成 2px， 就失去了UI設計細線的原意。那麼，該如何畫一根優雅的 .5px 細線呢？

這可以用css3的transform屬性來做。直接寫成scss 中的 mixin。

@mixin fiber--verti($direction,$linecolor){
    @include pse;
    left:0;
    #{$direction}:0;
    width: 100%;
    height: 1px;
    border-top:1px solid $linecolor;
    -webkit-transform-origin: 0 0;
   transform-origin: 0 0;
   -webkit-transform: scaleY(0.5);
   transform: scaleY(0.5);
}

@mixin fiber--hori($direction,$linecolor){
    @include pse;
    #{$direction}:0;
    top:0;
    height: 100%;
    width: 1px;
    border-left:1px solid $linecolor;
    -webkit-transform-origin: 0 0;
   transform-origin: 0 0;
   -webkit-transform: scaleX(0.5);
   transform: scaleX(0.5);

}

對需要畫線的元素，這麼引用 :

// 對header元素畫一根位於下放的細線，模擬 border-bottom
header{
    position: relative;
    &::after{
    @include fiber--verti(bottom,#e6e6e6);
    }
}

就介麼簡單~~~~