Question

我有以下笔：

我制作了一些很酷的按钮。现在的问题是，当按钮处于活动状态并且向下缩小一点时，按钮边框和放大的背景颜色之间会出现奇怪的白色间隙。

下图中左侧的

是处于正常状态的按钮，中间按钮处于聚焦，悬停和活动状态，最右侧是聚焦和悬停按钮。

正如您所看到的那样，当按钮处于活动状态时，会出现一个奇怪的白色间隙，我尝试以下方法来纠正问题但没有成功

在缩放背景颜色的伪元素上：

transform:scale(1.1);

在父元素上：

overflow:hidden;

但这并没有帮助，因为溢出只会隐藏填充而不是边界的内容。

所以问题是解决这个问题的方法是什么？

按钮的HTML：

<button class="zoombtn">
    <span>GREY<span>
</button>

按钮在SCSS中的源代码：

.zoombtn{
    -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
    font-family:'Roboto','Open Sans Hebrew','Arial',sans-serif;
    margin:6px;
    cursor:pointer;
    font-size:32px;
    padding:24px;
    border:0;
    background:rgba(0,0,0,.07);
    position:relative;
    outline:0;
    border-width:6px;
    border-style:solid;
    border-color:#BDBDBD;       
    transition:all .25s;
    overflow:hidden;
    span{
        position:relative;
        color:#424242;
        transition:all .25s cubic-bezier(.55,0,.1,1);
    }
    &:before{
        content:' ';
        display:block;
        position:absolute;
        top:0;left:0;right:0;bottom:0;
        background:#9E9E9E;
        transform:scale(0);
        transition:all .25s cubic-bezier(.55,0,.1,1);
    }
    &:hover,&:focus{
        border-color:#9E9E9E;
                box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
        span{
            color:#fff;
            text-shadow:0 0 5px #555;
        }
        &:before{
            transform:scale(1.1);
        }
    }
    &:active{
        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
        transform:scale(.97);
        border-color:#757575;
        span{
            text-shadow:0 2px 8px #333;
        }
        &:before{
            background:#757575;
        }
    }
}

Answer 1

我找到了一个非常简单的回答我自己的问题。只需将以下行添加到按钮的活动状态：

<results>48</results>

这基本上解决了这个问题，因为白色间隙变成了有色的间隙。

差距仍然存在，但与按钮的颜色相同，所以它根本不会引人注意。

Answer 2

这只是与按钮元素上的overflow:hidden相关联的剪辑问题。你真的不需要它，只需删除该行，工件就会消失。

Answer 3

看起来像：

对于transform:scale(.97)（transform: perspective(500px) translate3d(0px,0px,-10px);），

.zoombtn:active可以转为&:active。

fork of your pen fixed

如何消除边框和元素之间不需要的间隙

3 个答案: