解决CSS移动端1px边框问题_ios app css 1px边框消失-CSDN博客

本文链接：https://blog.csdn.net/magicfly9527/article/details/52297045

移动项目开发中，安卓或者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>