在Android中系统是识别0.5dp的,但是在web中浏览器内核在遇到0.5px时会向上取整为1px。
前端UI设计的间隔线都是设计0.5px,这时候用border-bottom: 1px solid #e6e6e6;
效果还是很粗的,UI复核页面的时候肯定不过关的。
下面说一下参考WeUI的解决方案:
WeUI
jQuery WeUI
Tencent/weui Github
1. 间隔线
先看WeUI源码的实现
提取核心:
.weui-cell {
position: relative;
}
.weui-cell:before {
content: " ";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
border-top: 1px solid #e5e5e5;
color: #e5e5e5;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
z-index: 2;//看情况使用
}
然后这样使用 <div class="weui-cell"/>
2.border 描边
再看WeUI源码的实现
提取核心:
.weui-border {
position: relative;
border-radius: 5px;
}
.weui-border: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);
transform: scale(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
box-sizing: border-box;
border-radius: 10px;
}
然后这样使用 <div class="weui-border">xxx...</div>