1. 程式人生 > >css 0.5px 間隔細線 | border 細線的實現 參考WeUI

css 0.5px 間隔細線 | border 細線的實現 參考WeUI

在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>