CSS3实现0.5px的边框

更新日期: 2019-09-09阅读: 4k标签: 边框

单边框0.5px,可以用以下方式:

方式一: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>

链接: https://www.fly63.com/article/detial/5825

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!