解決CSS移動端1px邊框問題
阿新 • • 發佈：2019-02-03
移動專案開發中，安卓或者IOS等高解析度螢幕會把1px的border渲染成2px來顯示，網上搜了一下，解決方法如下：
<!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;} .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>