葛定红

葛定红 发表于 2016-12-8 09:39
.cry_bd_bottom:after{
        content: " ";
        position: absolute;

.cry_bd_bottom{position: relative;}补充

OSChina

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

1. .border {
   
2. position: relative;
   
3. width: 300px;
   
4. height: 200px;
   
5. }
   
6. .border:after {
   
7. border: 1px solid #ff3300;
   
8. display: block;
   
9. content: '';
   
10. position: absolute;
    
11. top: 0;
    
12. right: 0;
    
13. bottom: 0;
    
14. left: 0;
    
15. -webkit-transform-origin: 0 0;
    
16. -webkit-transform: scale(1);
    
17. pointer-events: none;
    
18. }
    
19. @media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
    
20. .border:after {
    
21. right: -100%;
    
22. bottom: -100%;
    
23. -webkit-transform: scale(0.5);
    
24. }
    
25. }

复制代码

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

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

流风回雪

OSChina 发表于 2016-12-8 09:45
APICloud无疑已是相当火的APP开发工具了，面对从web到移动APP转变的开发者可能有很多小常识并不是特别熟悉 ...

赞              

官孤傲

收藏备用

suosuo

这个可以做到的，分享下我的1像素边框解决方案




/*1像素解边框决方案*/
/*伪类样式加上 pointer-events: none;解决层事件遮挡bug(click失效等)*/
.oneline{position:relative;}
.oneline:after {pointer-events: none;border-radius: 10px; border:1px solid #ccc;width:200%;height:200%;position:absolute;top:0;left:0;z-index:0;content:"";-webkit-transform:scale(0.5);-webkit-transform-origin:0 0;transform:scale(0.5);transform-origin:0 0;}
.oneline-top {position:relative;}
.oneline-top:after {pointer-events: none;border-top:1px solid #ccc;width:200%;height:200%;position:absolute;top:0;left:0;z-index:0;content:"";-webkit-transform:scale(0.5);-webkit-transform-origin:0 0;transform:scale(0.5);transform-origin:0 0;}
.oneline-right {position:relative;}
.oneline-right:after {pointer-events: none;border-right:1px solid #ccc;width:200%;height:200%;position:absolute;top:0;left:0;z-index:0;content:"";-webkit-transform:scale(0.5);-webkit-transform-origin:0 0;transform:scale(0.5);transform-origin:0 0;}
.oneline-bottom {position:relative;}
.oneline-bottom:after {pointer-events: none; border-bottom:1px solid #ccc;width:200%;height:200%;position:absolute;top:0;left:0;z-index:0;content:"";-webkit-transform:scale(0.5);-webkit-transform-origin:0 0;transform:scale(0.5);transform-origin:0 0;}
.oneline-left {position:relative;}
.oneline-left:after {pointer-events: none;border-left:1px solid #ccc;width:200%;height:200%;position:absolute;top:0;left:0;z-index:0;content:"";-webkit-transform:scale(0.5);-webkit-transform-origin:0 0;transform:scale(0.5);transform-origin:0 0;}

oscarhk

html5做出的样子比原生的要好很多 ， 至于细线也是很容易实现的 只是你没有掌握方法

金柯

嫌粗你可以缩放呀你想用什么单位不都行
记得给当前元素加定位

.borderT:before,.borderB:after{content:'';background:#ddd;width:100%;height:1px;position:absolute;left:0;right:0;transform:scale(1,0.5);}
.borderT:before{top:0;}
.borderB:after{bottom:0;}