CSS3實現小於1px的邊框(移動端)

本文轉載自查看原文 2017-03-03 15:00 1709 css/ 移動端

<!doctype html>
<html lang="en">
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta charset="UTF-8">
    <title>CSS3實現小於1px的邊框(移動端)</title>
    <style type="text/css">
        *{margin: 0;padding: 0;-webkit-box-sizing:border-box;}
        .div-big{
            position: relative;
        }
        .div-small{
            height: 60px;
            line-height: 60px;
            padding-left: 10px;
            position: relative;
            font-size: 20px;
        }
        .div-small:after{
            content: "";
            display: block;
            position: absolute;
            left: -50%;
            width: 200%;
            height: 1px;
            background: #ededed;
            -webkit-transform:scale(0.5);
        }
    </style>
</head>
<body>
<div class="div-big">
    <div class="div-small">第一塊</div>
    <div class="div-small">第二塊</div>
</div>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css解決移動端1px邊框問題 css實現1px 像素線條_解決移動端1px線條的顯示方式移動端 1px 像素邊框問題的解決方案（Border.css） css筆記--web端小於1px設計的處理方法目前解決移動端1px邊框最好的方法 CSS3實現0.5px的邊框移動端H5頁面中1px邊框的幾種解決方法移動端1px問題處理方法 css3縮放功能實現0.5px的邊框移動端適配,h5網頁,手機端適配兼容方案.可以顯示真實的1px邊框和12px字體大小,dpr淺析