APICloud：让你的APP边框显示原生的1px

标签：

APICloud无疑已是相当火的APP开发工具了，面对从web到移动APP转变的开发者可能有很多小常识并不是特别熟悉，比如这个border。怎样让1px更细，看起来像原生的？下面教大家一个方法：

.border {
    position: relative;
    width: 300px;
    height: 200px;
}
.border:after {
    border: 1px solid #ff3300;
    display: block;
    content: ‘‘;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transform-origin: 0 0;
    -webkit-transform: scale(1);
    pointer-events: none;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
    .border:after {
        right: -100%;
        bottom: -100%;
        -webkit-transform: scale(0.5);
    }
}

如果是想要上边框或者下边框。。。那么只需要修改border:after里面的border就可以了。

PS：特别说明

千万别漏下了pointer-events: none;要不然就没法点击了

APICloud：让你的APP边框显示原生的1px

标签：

原文地址：http://my.oschina.net/Twitter/blog/526705