css - 删除边框图像和线性背景之间的空间

Question

编辑:添加了 Codepen

我的 CSS 有一个小问题，在按钮的顶部和左侧的边框图像和线性背景之间有一个奇怪的空间。你能帮我删除它吗？感谢您的帮助。

这是代码笔。问题出在按钮“文本”上。我似乎只在 Chrome 的某些缩放级别上出现问题:https://codepen.io/zamehan/pen/ZMXWeg

这是关联的 CSS，按钮具有类 .special-button :

.special-button{
    background: linear-gradient(to right, #ececec 0%,#ececec 50%, #ececec 50%,#f1d0c1 50%,#f1d0c1 100%) no-repeat ;
    color:#616060;
    border: 1px solid transparent;
    border-image:  linear-gradient(to right, #ececec 0%,#ececec 50%, #ececec 50%,#f1d0c1 50%,#f1d0c1 100%) 5 !important;
}

.color-button {
    font-family: "Noxa";
    flex: 1 100%;
    margin: 6px;
    font-weight: 700;
    letter-spacing: 0.8px;
}

button {
    color:white;
    border: none;
    text-align: center;
    text-decoration: none;
    padding: 6px 11px;
    font-size: 12px;
    margin: 4px 5px;
    background-position: center;
    cursor: pointer;
    &[data-color="dark"] {
        $color: #616060;
        color: $color !important;
        &[data-selected="true"] {
            color: lighten($color, 10%) !important;
        }
    }
    border: 1px solid transparent;
}

Answer 1

我也遇到了这个问题，找到了下面这篇文章:

https://css-tricks.com/the-backgound-clip-property-and-use-cases/

我将具有线性渐变的元素的 background-clip 属性设置为“padding-box”，线条/空格消失了。