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

Question

编辑：添加了Codepen

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

这是codepen。问题出在按钮“文本”上。我好像问题只出现在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”，线条/空间消失了。