如何用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);
    }
}

就介么简单~~~~