时间戳

首页 > 解决方案 > 删除边框图像和线性背景之间的空间

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

问题描述

编辑：添加 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;
}

标签： css

解决方案

我也遇到了这个问题，找到了以下文章：

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

我将具有线性渐变的元素的背景剪辑属性设置为“填充框”，并且线条/空间消失了。

推荐阅读