css 0.5px border 解决方案(scss版)

最新推荐文章于 2025-01-02 15:44:05 发布

Astronomical

最新推荐文章于 2025-01-02 15:44:05 发布

阅读量2.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： h5 &amp;amp;amp; css 文章标签： css

本文链接：https://blog.youkuaiyun.com/strangedbly/article/details/79605888

h5 &amp;amp; css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种利用伪元素及缩放技巧实现0.5px边框的方法，并提供了多个SCSS混合宏来快速应用不同类型的0.5px边框效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先贴下代码吧 ~(._.)~
不用scss的小伙伴先别急着改，下面有css版的 ~(._.)~

@mixin borderHalfPx($borderColor: #ddd, $borderRadius: 0, $borderTop: 0, $borderRight: 0, $borderBottom: 0, $borderLeft: 0, $borderStyle: solid) {
    position: relative;
    &::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 200%;
        height: 200%;
        border-radius: $borderRadius * 2;
        border: $borderTop $borderStyle $borderColor;
        border-right-width: $borderRight;
        border-bottom-width: $borderBottom;
        border-left-width: $borderLeft;
        transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
        transform: scale(.5, .5);
        -webkit-transform: scale(.5, .5);
    }
}

@mixin borderHalfPxRound($borderColor: #ddd, $borderRadius: 0) {
     @include borderHalfPx($borderColor, $borderRadius, 1px, 1px, 1px, 1px);
}

@mixin borderTopHalfPx($borderColor: #ddd, $borderRadius: 0) {
    @include borderHalfPx($borderColor, $borderRadius, 1px, 0, 0, 0);
    // 解决before内容盖住div, 点击失效的问题 (例如：点击input无法focus)
    &::before {
        height: 0;
        bottom: initial;
    }
}

@mixin borderBottomHalfPx($borderColor: #ddd, $borderRadius: 0) {
    @include borderHalfPx($borderColor, $borderRadius, 0, 0, 1px, 0);
    &::before {
        height: 0;
        top: initial;
    }
}

@mixin borderLeftHalfPx($borderColor: #ddd, $borderRadius: 0) {
    @include borderHalfPx($borderColor, $borderRadius, 0, 0, 0, 1px);
    &::before {
        width: 0;
        right: initial;
    }
}

@mixin borderRightHalfPx($borderColor: #ddd, $borderRadius: 0) {
    @include borderHalfPx($borderColor, $borderRadius, 0, 1px, 0, 0);
    &::before {
        width: 0;
        left: initial;
    }
}

使用方法：

如果要一个四周0.5px的边框, 可以直接用@include borderHalfPxRound(#ddd, 0px);
(参数 #ddd, 0px 分别代表border-color 和 border-radius)
如果只要一条0.5px的边框，可以用borderTopHalfPx， borderBottomHalfPx， borderLeftHalfPx， borderRightHalfPx，分别代表上下左右的边框，用法和上面的borderHalfPxRound是一样的。
也可以直接用borderHalfPx, 参数含义$borderColor， $borderRadius， $borderTop, $borderRight, $borderBottom, $borderLeft, $borderStyle 貌似已经很明了了，就不啰嗦了。但要注意某一个边没有的话，值不能是none，而是0(比如没有上边框的话，$borderTop是0而不是none哦)。

同时也提供一个非scss版的吧，方便小伙伴们直接贴代码，哈哈

<div class="border-half button"></div>

.button {
    // 一些基本的按钮样式
}
.border-half {
    position: relative;
    &::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 200%;
        height: 200%;
        border-radius: 8px; // 4px * 2 先放大两倍，之后缩小
        border: 1px solid #ddd; // 上边框的粗细，没上边框就0px， 和 上下左右border的style和color   
        border-right-width: 0; // 右边框的粗细 有右边框为1px 没有为0
        border-bottom-width: 0;
        border-left-width: 0;
        transform-origin: 0 0; 
        -webkit-transform-origin: 0 0;
        transform: scale(.5, .5); // 之前放大, 再缩小
        -webkit-transform: scale(.5, .5);
}