標籤：
移動項目開發中，安卓或者IOS等高解析度螢幕會把1px的border渲染成2px來顯示，網上搜了一下，解決方案如下：
一、利用css中的transform的縮放屬性解決，推薦這個。如下面代碼。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>解決1px邊框問題</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/> <style> .line {position:relative;} .line:after {width:200%;height:200%;position:absolute;top:0;left:0;z-index:0;content:"";-webkit-transform:scale(0.5);-webkit-transform-origin:0 0;transform:scale(0.5);transform-origin:0 0;box-sizing:border-box;} .list {width:100%;margin:auto;list-style:none;padding:0;} .list:after {border:1px solid #ccc;border-radius:10px;} .item {padding:10px;} .item:after {border-bottom:1px solid #ccc;} .item:last-child:after {display:none;} </style></head><body><ul class="list line"> <li class="item line">item001</li> <li class="item line">item002</li> <li class="item line">item003</li> <li class="item line">item004</li> <li class="item line">item005</li> <li class="item line">item006</li> <li class="item line">item007</li> <li class="item line">item008</li> <li class="item line">item009</li> <li class="item line">item010</li></ul></body></html>
這個主要利用after偽類進行縮放。調用公用class，還是很方便的。
二、JS判斷是否支援0.5px邊框，是的話，則輸出類名hairlines
if (window.devicePixelRatio && devicePixelRatio >= 2) { var testElem = document.createElement(‘div‘); testElem.style.border = ‘.5px solid transparent‘; document.body.appendChild(testElem); if (testElem.offsetHeight == 1) { document.querySelector(‘html‘).classList.add(‘hairlines‘); } document.body.removeChild(testElem);}
.hairlines .box {}
目前在用這個方法，使用很方便，無須多餘的class，可惜支援的不是很好，IOS8+以上才可以。
三、box-shadow 陰影
-webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);
最先用的就是這個方法，IOS顯示不出。很多安卓機顯示就是坨翔，黑乎乎的描邊。。
四、background-image
.border { background-image:linear-gradient(180deg, red, red 50%, transparent 50%), linear-gradient(270deg, red, red 50%, transparent 50%), linear-gradient(0deg, red, red 50%, transparent 50%), linear-gradient(90deg, red, red 50%, transparent 50%); background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%; background-repeat: no-repeat; background-position: top, right top, bottom, left top; padding: 10px; }
也能實現效果，使用很不方便
五、圖片
.border-image{ border-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB5JREFUeNpiPnH8zH/G////MzAxAAHTyRNn/wMEGABpvQm9g9TJ1QAAAABJRU5ErkJggg==") 2 0 stretch;border-width: 0px 0px 1px;}
顯示效果有點模糊，而且萬一以後要修改個顏色，那不坑爹了。
所以，目前推薦第一種方法。
解決CSS移動端1px邊框問題
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
