关于1px边框的学习

关于1px边框的学习

今天仔细看了以下weui(http://weui.github.io/weui)的css,发现全部边框都是使用伪类来实现。

最开始十分疑惑,为什么不直接使用border呢?

后来仔细看看发现,同时配合伪类实用的还有scale。
而且在mac上面,线条是1px。

这不禁让我赞叹!好巧妙的方法,通过缩放压缩线条。

以下是下边框1px现的css:

.weui_cells:after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid #D9D9D9;
    color: #D9D9D9;
    -webkit-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(0.5);
    -ms-transform: scaleY(0.5);
    transform: scaleY(0.5);
}

通过y方向上的缩放,达到了1px高度线条。

.weui_btn:after {
    content: " ";
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    box-sizing: border-box;
    border-radius: 10px;
}

这里通过也是一样的原理。

想想我原来都是用js判断浏览器,通过class判断1px和0.5px边框,还是不够优雅。

hq5544

I am 炒饭君. A front-end engineer.

Subscribe to hq5544 blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!