时间戳

首页 > 解决方案 > 悬停时，我的 CSS 按钮与 scale() 出现图形问题

html - 悬停时，我的 CSS 按钮与 scale() 出现图形问题

问题描述

我的 CSS 按钮有一个问题，看起来像是图形问题。当我将鼠标悬停并将光标移出时，它看起来像是按钮错误的边框，并在按钮周围制作了一个幽灵边框。在 chrome 中它更明显，但在 Opera 中它就像发生了另一种错误。

我注意到，当我取出transition: 0.3s问题时，问题已在 chrome 上得到解决，但我仍然需要按钮以平滑的方式缩放。

这是一个小提琴：

https://jsfiddle.net/573pxfgo/1/

:root{
    --cor1:#206197;
    --cor2: #35ab4a;
}
div{
  padding:100px;
}

.btn2{
    color:white;
    padding:15px 40px;
    border:2px solid white;
    background-color: var(--cor1);
    outline: none;
    transition: 0.3s;
    cursor:pointer;
}

.btn2:hover{
    background-color: var(--cor2);
    transform: scale(1.2);
}
<div>
  <button class="btn2"> Solicitar Orçamento</button>
</div>

标签： htmlcss

解决方案

您将需要添加background-clip:padding-box到您的.btn2类中，以便元素的填充容器内的背景剪辑。目前，您看到的边界非常细的边界颜色与您的背景颜色相同，这是因为默认情况下background-clip:border-box已应用。

您可以从MDN阅读更多相关信息

:root{
    --cor1:#206197;
    --cor2: #35ab4a;
}
div{
  padding:100px;
}

.btn2{
    color:white;
    padding:15px 40px;
    border:2px solid white;
    background-color: var(--cor1);
    outline: none;
    transition: 0.3s;
    cursor:pointer;
    background-clip:padding-box;
}

.btn2:hover{
    background-color: var(--cor2);
    transform: scale(1.2);
}
<div>
  <button class="btn2"> Solicitar Orçamento</button>
</div>

推荐阅读