記錄移動端 - 0.5px

在PC端用1px的邊框線，看起來還好，但在手機端看起來就很難看;iphone 能夠設置border:solid 0.5px red;;android會把0.5px視爲0px，即無邊框狀態；

2.利用css3新屬性scale

給須要加邊框的元素插入一個僞類，僞類採用絕對定位，寬高設爲200%，而後再縮放爲0.5，天然就是0.5px了

<div class="test1"></div>

.test1{
  width: 100px;
  height: 100px;
  position: relative; 
}
.test1::after{
    content:"";
    width:200%;
    height:200%;
    position:absolute;
    top:0;
    left:0;
    border:1px solid red;
    -webkit-transform : scale(0.5);
            transform : scale(0.5);
    -webkit-transform-origin : 0 0;
            transform-origin : 0 0;
    box-sizing: border-box;    
}
複製代碼

反作用 - - - 加分題很重要哦！

當用僞類的絕對定位實現了邊框0.5px後，咱們在test1類上的點擊事件會失效，所以此時的僞類是絕對定位，並且長寬等於父類元素的長寬，是脫離了文檔流覆蓋在父類上的，僞類不是真實的DOM元素。

解決方法

再寫一個絕對定位元素，覆蓋在父元素上，層級z-index優先級要高一點

<div class="test1"></div>

.test1{
  width: 100px;
  height: 100px;
  position: relative; 
}
.test1::after{
    content:"";
    width:200%;
    height:200%;
    position:absolute;
    top:0;
    left:0;
    border:1px solid red;
    -webkit-transform : scale(0.5);
            transform : scale(0.5);
    -webkit-transform-origin : 0 0;
            transform-origin : 0 0;
    box-sizing: border-box;    
}
.click-test1{
position:absolute;
top:0;
left:0;
z-index:10;
}
複製代碼

2. 利用background-image

利用背景漸變linear-gradient來實現，具體代碼以下：

.test1 {
    background-image: -webkit-linear-gradient(0deg,red,red 50%,transparent 50%);
    background-image : linear-gradient(0deg,red,red 50%,transparent 50%);
    background-size: 100% 1px;
    background-repeat: no-repeat;
}
複製代碼

分析

`linear-gradient`默認方向從上到下，從0deg到50%的地方顏色是邊框顏色，而後下邊一半顏色就是透明瞭-沒顏色。中間之因此兩個50%寫在一塊兒，是由於這樣就不會有顏色過渡的漸變效果了，看起來更像一條線，涇渭分明； 而後最關鍵的是下邊的`background-size: 100% 1px;`，就是寬度100%，但高度是1px，注意這裏的1px天然是css像素了，加上上邊的`background-image`，實際效果就是一半有顏色，一半那不就是0.5px,而後再去掉`repeat`，就實現了。

同理若是要寫border-left或border-right同樣的原理，只需改變方向就能夠了。

方向：0deg 、90deg 、180deg 、-90deg

缺點

只能作單方向的`border`，若是有個按鈕要加，並且還有圓角，那就無能爲力了

3. 使用box-shadow模擬邊框

利用css 對陰影處理的方式實現0.5px的效果 樣式設置：

.box-shadow-1px {
box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}
// 0px：表明垂直方向。 0表明無線段 1px表明左面 -1px表明右面
-1px：表明水平方向。 0表明無線段 1px表明上面 -1px表明下面
後面的兩個分別表明[模糊距離][陰影的大小] 無須改動
複製代碼

參考資料：

1. css實現各類0.5px的線 小結
2. 1px? 0.5px!
3. 移動端繪製0.5像素的幾種方法(整理) 4.7 種方法解決移動端 Retina 屏幕 1px 邊框問題 5.《使用Flexible實現手淘H5頁面的終端適配》