如何实现 0.5 px的边框

如何实现 0.5 px的边框

场景:设置scaleY设置1条边框

查看例子:

我们的实现思路：使用 transform: scaleY(.5); 来缩小

    <style>
        .c {
            width: 100px;
            height: 50px;
            position: relative;
            background-color: #eee;
        }

        .c::after {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            background: red;
            height: 1px;
            transform: scaleY(.5);
        }
    </style>
    <div class="c"></div>

场景:使用scale设置4条边框

查看例子:

思路： 使用伪元素定位放大2倍，然后再scale到0.5 即可

注意: 如果要设置圆角，则将伪元素的border-radius: 设置为元素的2倍border-radius值

<style>
        .c {
            width: 100px;
            height: 50px;
            position: relative;
            background-color: #eee;
            margin: 200px auto;
            box-sizing: border-box;
            overflow: hidden;
        }

        .c::after {
            box-sizing: border-box;
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 200%;
            border: 1px solid red;
            height: 200%;
            transform: scale(.5);
           /* 大小调整后 需要更改原点来对其到原来的dom */
            transform-origin: 0% 0%;
        }
    </style>
    <div class="c"></div>

场景:使用box-shadow设置4条边框

查看例子:

也可以使用 box-shadow: inset 0px 0px 0px 0.5px #000; inset代表内阴影

<style>
        .c {
            width: 100px;
            height: 100px;
            margin: 20px auto;
            border-radius: 20px;
            /* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
            box-shadow: 0px 0px 0px 0.5px #000;

        }
    </style>
    <div class="c"></div>

背景图片属性也能实现一条边的0.5px

查看例子:

.c {
            width: 100px;
            height: 50px;
            position: relative;

            /*  第二个50% 是为了使中间有一条硬线转变，而不使用渐变过度  */
            background-image: linear-gradient(0deg, blue 50%, transparent 50%);

            background-size: 100% 1px;
            background-repeat: no-repeat;

        }

参考文章

https://juejin.cn/post/7118029219698835470 如何实现字体小于 12px 以及边框 0.5 px？

https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/linear-gradient

https://zhuanlan.zhihu.com/p/340711204