解决CSS移动端1px边框问题

最新推荐文章于 2025-10-02 11:18:26 发布

原创最新推荐文章于 2025-10-02 11:18:26 发布 · 5.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web #css #移动

html 同时被 2 个专栏收录

17 篇文章

订阅专栏

css

15 篇文章

订阅专栏

本文介绍了一种解决移动项目开发中1px边框在高分辨率屏幕上渲染为2px的方法，通过使用CSS伪元素及transform属性实现精确的边框宽度。

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