移动端1px

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>像素为1px</title>
        <style type="text/css"> .border { position: relative; margin-bottom: 20px; } .border:after { content: ''; display: block; position: absolute; width: 100%; left: 0px; bottom: 0px; height: 1px; background-color: red; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } .border3 { width: 100%; height: 40px; border: 1px solid red; margin-bottom: 20px; } .border2 { margin: 50px; background: -webkit-gradient(linear, left top, left bottom, color-stop(.5, transparent), color-stop(.5, #ccc), to(#ccc)) left bottom repeat-x; background-size: 100% 1px; } </style>
    </head>

    <body>
        <div class="border">像素为1px解决方法一</div>

        <div class="border2">像素为1px解决方法二</div>
        <div class="border3">像素为1px解决方法二</div>
    </body>

</html>

你可能感兴趣的:(移动)