H5端横线的运用

关于h5端静态页面中，通常会用到上下边框，如果上下边框用border-top和border-bottom来写的话，线条会比较粗，影响美观，那么原生态的上下边框是怎么做的呢？

我们可以用伪元素来实现，实例如下：

// 横细线缩放

%lineY{

@mediaonlyscreenand (-webkit-min-device-pixel-ratio:2) {

@includescaleY(0.5);

}

@mediaonlyscreenand (-webkit-min-device-pixel-ratio:3) {

@includescaleY(0.33);

}

}

.business{

margin-top:10px;

background:#fff;

position:relative;

&:before{

content:'';

display:block;

z-index:15;

width:100%;

height:1px;

position:absolute;

left:0;

top:0;

border-top:solid1px#d9d9d9;

@extend%lineY;

}

}

div的结构如下：

ok

这样子就可以了。