css - 如何删除边框和元素之间不需要的间隙

Question

我有以下笔:

http://codepen.io/Bodokh/pen/EZKxjE

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

下图左侧是处于正常状态的按钮，中间按钮处于聚焦、悬停和事件状态，最右侧是聚焦且悬停的按钮。

如您所见，当按钮处于事件状态时会出现一个奇怪的白色间隙，我尝试了以下方法来更正该问题但没有成功

在缩放背景色的伪元素上:

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

我找到了一个非常简单的答案来解决我自己的问题。通过简单地将以下行添加到按钮的事件状态:

.zoombtn:active{
    background:{background_of_button}
}

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

间隙仍然存在，但与按钮的颜色相同，因此根本不引人注意。