设置高度为0.5像素的方法

方式一：border + border-image + 线性渐变linear-gradient

<div class="border">0.5像素边框</div>
<style>
    .border {
        width: 200px;
        height: 200px;
        margin: 0 auto;
        border-bottom: 1px solid transparent;
        border-image: linear-gradient(to bottom,transparent 50%, red 50%) 0 0 100%/1px 0;
    }
</style>

方式二：定位 + 伪元素 + background + 线性渐变linear-gradient

<div class="border">0.5像素边框</div>
<style>
    .border {
        width: 200px;
        height: 200px;
        margin: 0 auto;
        position: relative;
    }
    .border::before {
        content: " ";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background-image: linear-gradient(to bottom, transparent 50%, red 50%);
    }
</style>

方法三：定位 + 伪元素 + transfrom缩放（scale）

<div class="border">0.5像素边框</div>
<style>
    .border {
        width: 200px;
        height: 200px;
        margin: 0 auto;
        position: relative;
    }
    .border::after {
        content: " ";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: red;
        transform: scaleY(0.5);
    }
</style>

**对于需要四边0.5像素边框，可以用以下方式：

方式：定位 + 伪元素 + transfrom缩放（scale）

<div class="border">0.5像素边框~~~~</div>
<style>
    .border {
        width: 200px;
        height: 200px;
        margin: 0 auto;
        position: relative;
    }
    .border::before {
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        width: 200%;
        height: 200%;
        border: 1px solid red;
        transform-origin: 0 0;
        transform: scale(0.5);
    }
</style>

1px问题

在不同的移动设备中，css像素的1px因为dpr的不同会使用dpr个物理像素来显示，这就造成1px在不同设备上显示的粗细不一致，为解决这个问题，可采用如下方案：

伪元素+transform: scale(0.5) 方案

给需要设置1px边框的元素添加border-1px类

    .border-1px:after {
        content: '';        
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid red;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        
        /* 2倍屏 */
        @media screen and (min-device-pixel-ratio: 2),  (-webkit-min-device-pixel-ratio: 2){
            border-radius: 20px; // 圆角根据dpr放大相应的倍数
            width: 200%;
            height: 200%;
            -webkit-transform: scale(0.5);
            transform: scale(0.5);
        }
        /* 3倍屏 */
        @media screen and (min-device-pixel-ratio: 3),  (-webkit-min-device-pixel-ratio: 3){
            border-radius: 30px; // 圆角根据dpr放大相应的倍数
            width: 300%;
            height: 300%;
            -webkit-transform: scale(0.33);
            transform: scale(0.33);
        }

    }

还可以写成mixin的形式，见移动端设置border的1px像素解决方案

1px问题还可以通过viewport缩放来解决，如方案三。viewport根据dpr缩放后，css中的1px就是用的一个物理像素来表示。

总结

1. 写1px 然后transform:scale(0.5) 或zoom(0.5)
2. 背景渐变 一半有颜色一半没有颜色

怎么实现真正1px dpr的存在导致你写的是1px,但是其实是2px或3px

详情转自：blog.csdn.net/weixin_4211…