移動端 1px 的問題
pc端你寫一個邊框 1px ,那就是1px 沒什麼異常，移動端可能在這個機器上細一點，那個機器上粗一點，
這就產生了問題，原因主要是螢幕的型別造成的，原因這裡不探討，只看解決方案：
先看看下面這兩種方案：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible"
.a1 { width: 100px; height: 50px; border: 0.5px solid #000; margin
.a2 { width: 100px; height: 50px; border: 1px solid #fff; border-bottom: 1px solid #000; box-shadow: 0 1px 1px #fff; margin: 0 auto; margin-top: 5px; }
.a3 { width
<body> <div class="test">常規設定1px畫素</div> <div class="a1">0.5px</div> <div class="a2">box-shadow遮蓋</div> <div class="a3">box-shadow凹陷</div></body>
</html>
效果圖：（iPhone 5s）
首先 A是正常情況下設定 1px 的時候顯示的樣式；
其次 B是設定0.5px的情況下顯示的樣式；（不是所有的機型都支援0.5px 這裡只是用來對比）
然後 C是使用box-shadow遮蓋border 實現的樣式，這個方法我在網上看到，不過實際看來
一點效果沒有，應該是個錯誤的方法吧，不做深究，有知道的小夥伴可以教教我，不勝感激；
最後 D是利用凹陷實現的邊框，寬度沒有問題，相當好了，但是可以看出，相較於正常的0.5px的
顯示顏色上淡了一些，這是個缺點；
上面的兩種方法證明 利用凹陷實現1px 的邊框是OK的，可以用的，僅此而已；下面再看看其它的方法：
這個方法是我在騰訊財經上看到的，來看看：效果圖和程式碼部分
這個效果是利用transform:scale() 進行縮放產生 1px 的效果；
下面我們利用這個方法實現以下看看效果怎麼樣：
程式碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .test { width: 100px; height: 50px; border: 1px solid #000; margin: 0 auto; }
.a1 { width: 100px; height: 50px; border: 0.5px solid #000; margin: 0 auto; margin-top: 5px; }
.a2 { width: 100px; height: 50px; border: 1px solid #fff; border-bottom: 1px solid #000; box-shadow: 0 1px 1px #fff; margin: 0 auto; margin-top: 5px; }
.a3 { width: 100px; height: 50px; box-shadow: inset 0px -1px 1px -1px #000; margin: 0 auto; }
.a3::after{ position:relative; top:40px; content:''; display:block; background: #000; width:200px; height:1px; transform:scaleY(0.5) } </style></head>
<body> <div class="test">常規設定1px畫素</div> <div class="a1">0.5px</div> <div class="a2">box-shadow遮蓋</div> <div class="a3">box-shadow凹陷</div> <div class="a4">利用transform:scale()</div></body>
</html>
顯示效果：
可以看出這種方法也是OK的；
我們這裡只是簡單表現了一下一個1px 的線條如何實現，但是上面的線條位置並不是我想要的，或者說
我想實現的是div的四周邊框1px 的線，下面再完整的實現一下：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1,user-scalable=no"> <title>Document</title> <style> .test { position: relative; width: 100px; height: 200px; }.test::after { content: ""; box-sizing: border-box; position: absolute; left: 0; top: 0; border: 1px solid #000; width: 200%; height: 200%; transform: scale(0.5); transform-origin: 0 0; }
.abc { width: 100px; height: 200px; border: 1px solid #000; } </style> </head> <body> <div class="test">奧術大師多所多</div> <p class="abc"></p> </body></html>
上面的效果：
同上上面的例子我們可以看出，當我需要單獨一條線的時候，那麼就是相當於我創造了一個1px 的
線，然後貼在了我想要的地方，就和貼紙一樣，位置是可以通過父級加相對定位，然後給線加絕對定位
來實現線的移動；
那麼，四周1px的邊框的實現就好理解了，你的div 還在那個地方沒有變化，沒有邊框沒有顏色，然後，
我們通過after偽類創造了一個邊框1px的貼紙，這個貼紙和div的大小相同，然後把貼紙貼在div上面，
相當於覆蓋了，視覺上看來就是div有了邊框；
方法還有很多，暫時到這，後續繼續補充；