編寫移動端高清屏頁面的1px邊框和線

本文轉載自查看原文 2016-10-17 15:36 1309

直接上代碼

.out {
        border: solid 1px #000;
        padding: 1rem;
    }

    .inner {
        position: relative;
        margin-bottom: 1rem;
        padding: 1rem;
    }
    .m-t{
        margin-top: 1rem;
    }
    .m-t-o{
        border:none;
        border-bottom:1px solid rgb(221,221,221);
        height:1px;
        -webkit-transform: scaleY(0.5);
        -webkit-transform-origin:0 0;
    }
    @media screen and (-webkit-min-device-pixel-ratio: 2){
        .one:before {
            position: absolute;
            top: 4.4rem;
            left: 0;
            width: 100%;
            height: 1px;
            -webkit-transform: scale(1,.5);
            transform: scale(1,.5);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            content: '';
            border-top: 1px solid #ddd;
        }

        .t:before {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 1px;
            -webkit-transform: scale(1,.5);
            transform: scale(1,.5);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            content: '';
            border-top: 1px solid #ddd;
        }
        .l:before {
            position: absolute;
            top: 0;
            left: 0;
            width: 1px;
            height: 100%;
            -webkit-transform: scale(.5,1);
            transform: scale(.5,1);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            content: '';
            border-left: 1px solid #ddd;
        }
        .r:before {
            position: absolute;
            top: 0;
            right: 0;
            width: 1px;
            height: 100%;
            -webkit-transform: scale(.5,1);
            transform: scale(.5,1);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            content: '';
            border-right: 1px solid #ddd;
            z-index: 1;
        }
        .b:after {
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 1px;
            -webkit-transform: scale(1,.5);
            transform: scale(1,.5);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            content: '';
            border-bottom: 1px solid #ddd;
        }

        .all:before {
            border: 1px solid #ddd;
            -webkit-border-radius: 4px;
            border-radius: 4px;
            width: 200%;
            height: 200%;
            position: absolute;
            top: 0;
            left: 0;
            -webkit-transform: scale(.5);
            transform: scale(.5);
            pointer-events: none;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            content: '';
        }
    }

<body>
<div class="out">

    <h2 class="one">測試的一行文字</h2>
    <div class="out">
        <div class="inner t">上邊框</div>
        <div class="inner l">左邊框</div>
        <div class="inner r">右邊框</div>
        <div class="inner b">下邊框</div>
        <div class="inner all">邊框</div>
    </div>
</div>

<div class="out m-t">
    測試的另一行文字
    <hr class="m-t-o"></hr>
</div>
</body>

一種方法是
給div添加 position: relative;

再添加相對應的偽類

另一種方法是
把hr繪制成一像素的橫線，hr樣式如下

{
        border:none;
        border-bottom:1px solid rgb(221,221,221);
        height:1px;
        -webkit-transform: scaleY(0.5);
        -webkit-transform-origin:0 0;
    }

效果圖：放大還是能看出一像素處理后和沒處理的區別



github地址：https://github.com/fengnovo/diary/tree/master/react/20161017

免責聲明！

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

猜您在找 移動端1px邊框在移動端畫出真正的1px邊框移動端，h5頁面1px 1像素邊框過粗解決方案移動端H5頁面中1px邊框的幾種解決方法解決移動端1px邊框問題的幾種方法解決CSS移動端1px邊框問題移動端1px邊框解決方案移動端1px 邊框完整方案（四個方向）解決移動端1px邊框問題的幾種方法目前解決移動端1px邊框最好的方法