css 0.5px 間隔細線 | border 細線的實現 參考WeUI
阿新 • • 發佈:2019-01-24
在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>