CSS 边框过渡添加了不需要的额外像素答案

【问题标题】：CSS Border Transition adds Unwanted Extra PixelsCSS 边框过渡添加了不需要的额外像素
【发布时间】：2021-03-31 19:49:57
【问题描述】：

我正在为我的电子应用程序（HTML、SASS）设计一个按钮。悬停时，此按钮将添加一个 10px 的边框顶部和边框底部，然后将其高度调整 -20 以取消额外的边框高度。我的过渡工作几乎完美，除了当每个边框（悬停时的顶部和底部）添加一个小边框（看起来小于 1px）时，这个额外的边框会增加按钮的总高度刚好足以将下游的 html 推到一个在视觉上很烦人的小凹凸处。在包含的 gif 中，您会在悬停过渡完成时注意到它，您应该会看到一个 1px 的边框在最后突然消失。如何防止这额外的几个边框像素生成和碰撞我的 html 的其余部分？还有其他方法可以创建我想要的相同效果吗？

这是我在这里的第二篇文章，上一篇是在 2 年前，所以如果我遗漏了我应该包含的内容，请告诉我，谢谢阅读！

HTML：

<div class="--square e--block --btn">
    <h1>Create Backups</h1>                    
</div>

SCSS 变量：

$mainSize: 100px;
$btnBorder: 10px;

SCSS：


//-- Basic element
.e--block {
    //-- Position
    //- Flex
    display: flex;
    flex-direction: column;
    justify-content: center;
    //- Text
    text-align: center;
    //- Align
    margin: $baseSpacing;

    //-- Style
    //- BG
    background-color: $btnColorLight;
    //- Text
    color: $white;
    font-weight: 2;
    //- Border
    //border: none;
    border-radius: $borderRadius;

    
    * {
        //-- Position
        //- Flex
        vertical-align: middle;
        //- Align
        padding: {
            top: 10px;
            bottom: 10px;
        }
        margin: auto;
    }
}

.--btn {
    //-- Style
    //- Border
    border: 0px solid white;
    //- Transition
    transition: {
        property: border-width, height;
        duration: 1s;
        timing-function: ease;
    }
}
.--square {
    //-- Position
    //- Size
    height: ($mainSize * 2);
    width: ($mainSize * 2);
}
.--btn.--square:hover:not(.--no-trans) {
    //-- Position
    //- Size
    height: (($mainSize * 2) - ($btnBorder * 2));
    //-- Style
    //- Border
    border-top-width: $btnBorder;
    border-bottom-width: $btnBorder;
}

【问题讨论】：

您能否提供一个有效的 sn-p，这将有助于我们更轻松地查看问题。

标签： html css sass electron css-transitions

【解决方案1】：

我无法解释为什么会出现这个问题，但我猜这是因为渲染引擎不擅长处理这种双重转换。

作为一种解决方法，您可以在您的.--square 上使用带有border-box 值的box-sizing 属性并删除height 更改：

.--square {
   //-- Position
   //- Size
   height: ($mainSize * 2);
   width: ($mainSize * 2);
   box-sizing: border-box;
}

.--btn.--square:hover:not(.--no-trans) {
    //-- Position
    //- Size
    //-- Style
    //- Border
    border-top-width: $btnBorder;
    border-bottom-width: $btnBorder;
}

【讨论】：

这主要是有效的，摆脱了烦人的内容凹凸，尽管那个奇怪的 1px 最终帧仍然存在。通过使用分层插图 box-shadows : (box-shadow: 0 0px white inset, 0 0px white inset) (box-shadow: 0 -10px white inset, 0 10px white inset) :hover 我能够完成那种边框样式更平滑，没有奇怪的 1px 最终帧。太感谢了！希望这整件事可以帮助其他遇到同样问题的人。
嗯，是的，我不知道是否存在解决这个 1px 问题的小技巧。有时它可以通过添加像transform 这样的属性来解决，但我无法让它在这里工作。 box-shadow 解决方案是一个不错的技巧！
也许您应该将您的解决方案作为答案发布并接受它？

【解决方案2】：

另外我认为你可以通过使用自定义timing-function 来稍微加快这个凹凸，例如：

transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);

【讨论】：