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

【问题标题】：How to remove unwanted gap between the border and the element如何删除边框和元素之间不需要的间隙
【发布时间】：2017-05-26 17:36:05
【问题描述】：

我有以下笔：

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

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

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

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

关于放大背景颜色的伪元素：

transform:scale(1.1);

在父元素上：

overflow:hidden;

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

那么问题是如何解决这个问题？

按钮的 HTML：

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

SCSS中Button的源代码：

.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;
        }
    }
}

【问题讨论】：

请在问题本身的minimal reproducible example 中提供所有相关代码，而不是在第三方网站上。
无法复制它，是在特定浏览器中发生还是我必须做一些特别的事情才能看到它？在我的脑海中，我的猜测是在悬停时禁用边框并让伪元素上的背景为框着色。
@MichaelCoker 你用什么浏览器？我在 Edge 和 chrome 上试过这个，问题在两个浏览器上都是一致的。我可以在悬停时删除边框并添加一些填充，但动画看起来不太好。

标签： css sass

【解决方案1】：

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

.zoombtn:active{
    background:{background_of_button}
}

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

间隙仍然存在，但与按钮颜色相同，因此根本不明显。

【讨论】：

【解决方案2】：

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

【讨论】：

删除溢出不会改变结果，但我确实发布了一个非常简单的解决方案。不过感谢您的努力。
对我有用。

【解决方案3】：

看起来像：

transform:scale(.97) 可以转换为 transform: perspective(500px) translate3d(0px,0px,-10px); 为 .zoombtn:active (&:active)。

fork of your pen fixed

【讨论】：

这将删除整个活动的点击效果动画。我已经在上面发布了我的答案，所以无论如何谢谢！
@Bodokh ??从 0.97 到 1 有多少差异，除了填充整个元素并且不显示间隙之外，它会产生什么影响？ 0.03% ... 1像素平均。我连接了一个笔叉，可能我错过了什么，让我知道:)：
如果您输入链接并查看一下，您会发现 .97 确实增加了不少。
@Bodokh 哦，是的，我更新了链接和答案，以使 3D 方法仍然有用；）
虽然很简洁，但还是有点bug，尝试快速点击按钮，有时会缩小太多，到最后还是解决不了边框问题。至少在 chrome 上，一些按钮在激活时仍然在按钮右侧有突出的空白。