border的长度怎么设置_CSS完美的0.5px直线/四周border解决方案-CSDN博客

本文链接：https://blog.csdn.net/weixin_35802555/article/details/113047277

一句话总结

用伪元素画出200%宽高的边，然后transform scale(0.5)缩小，然后用pointer-events：none去除点击/聚焦事件。

先总结0.5px线的常见画法

1、乞丐版本

.hr{
    border:0.5px solid red;
}

缺点非常多，几乎不能兼容，常见的浏览器都是真实显示1px。

2、逻辑可行、实际很惨的线性渐变linear-gradient

.hr.gradient {
    height: 1px;
    background: linear-gradient(0deg, #fff, #000);
}

缺点是明显发虚，不是真实的0.5px实线

3、boxshadow方式

.hr.boxshadow{
    box-shadow: 00.5px0#000;
}

缺点是各流览器都是虚的，也不是完美方案

4、使用SVG

完美的解决方案，还可以适配不同形状的图形。

原理是利用SVG的描边属性为1物理像素（物理像素最低也必须得有1，不然什么也看不见了），是高清屏的0.5px。

缺点是有些复杂，简单的直线不必上SVG。

若用SVG时，部分场景也需要绝对定位和设置pointer-events : none;

<object data="./halfLine.svg" type="image/svg+xml" />

SVG文件（halfLine.svg）

<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'>
    <line x1='0' y1='0' x2='100%' y2='0' stroke='#000'></line>
</svg>

5、transform(0.5）

完美的解决方案，简单易用。

缺点是只能画直线和border，缺点是有实际文档流中的体积，且配合按钮写宽度不好计算及控制。

使用伪元素，将伪元素绝对定位且设置无事件，可以完美解决体积及不好控制的问题。代码如下：

<!DOCTYPE html>
<html lang="en">
<body>
    <style>
        .half-1px-line, .half-1px-border{
            position:relative
        }
        .half-1px-line::after, .half-1px-border::after{
            content         : '';
            position        : absolute;
            width           : 200%;
            height          : 200%;
            top             : 0;
            left            : 0;
            transform-origin: 0 0;
            border-width    : 1px;
            border-style    : solid;
            transform       : scale(0.5, 0.5);
            border-radius   : 1px;
            box-sizing      : border-box;
            pointer-events  : none;
        }
        .half-1px-line::after{
            border-width: 0;
            border-bottom-width:1px;
        }
    </style>
    <div class="half-1px-line">单线</div>
    <br>
    <div class="half-1px-border">四周0.5px</div>
</body>

</html>

参考文档

怎么画一条0.5px的边（更新） - 掘金juejin.im