悬停时，我的 CSS 按钮与 scale() 出现图形问题[重复]答案

【问题标题】：My CSS button is doing a graphic issue with scale() when hover [duplicate]悬停时，我的 CSS 按钮与 scale() 出现图形问题[重复]
【发布时间】：2021-05-25 23:07:06
【问题描述】：

我的 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>

【问题讨论】：

错误是什么！
@aahad 这是css

标签： html css

【解决方案1】：

所以我不确定为什么会发生这个错误，但修复它的解决方案是将轮廓设置为 1px 并使其透明。您还可以使用按钮的阴影来使渲染错误消失。您可以在 ~ 14 行看到我的更改。希望这可行！

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

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

.btn2:hover{
    background-color: var(--cor2);
    transform : scale(1.2);
}

<div>
  <button class="btn2"> Solicitar Orçamento</button>
</div>

【讨论】：

【解决方案2】：

我仍然在接受的答案中看到一个大纲，所以这是另一种方法。这看起来像是由缩放创建的图形错误。如果您使用不同的缩放值（尝试transform : scale(2);），您会发现鬼边框的数量会有所不同。

您可以通过删除白色边框来解决此问题：border:none;

如果您需要边框，请尝试将其设置在轮廓中：outline: 2px solid white;

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

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

.btn2:hover{
    background-color: var(--cor2);
    transform: scale(1.2);
}

<div>
  <button class="btn2"> Solicitar Orçamento</button>
</div>

【讨论】：

【解决方案3】：

您需要将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>

【讨论】：