悬停中的背景图像无法正常工作

Question

我正在尝试添加悬停效果，当用户悬停在按钮上时添加背景图像，但悬停时左侧仍有一小块区域仍然透明。

基本上，我添加了两个按钮，彼此相邻，问题在于第二个按钮，如果我删除第一个按钮或将第二个移动到下一行，那么它完全可以正常工作。

这就是我得到的。

这是删除第一个按钮后的样子

这里是代码

.gradient-button-1 {
    color: orangered;
    background: none;
    padding: 1.5rem 3rem;
    font-size: 1.3rem;
    border: solid 10px transparent;
    border-image: linear-gradient(to top right, orangered,yellow);
    
    border-image-slice: 1;
    outline: none;
    transition: all ease 0.3s;
}

.gradient-button-1:hover {
    background-image: linear-gradient(to top right, orangered,yellow);
    color: white;
}

.gradient-button-2 {
    color: orangered;
    background: none;
    padding: 1.5rem 3rem;
    font-size: 1.3rem;
    border: solid 10px transparent;
    border-image: linear-gradient(to right, orangered,transparent);
    border-image-slice: 1;
    outline: none;
    transition: all ease 0.3s;
}
.gradient-button-2:hover {
    background-image: linear-gradient(to right, orangered,transparent);
    border-right: none;
    border-right-style: none;
    color: white;
    
}

<section>

          <h4>Gradient Bordered Buttons</h4>
          <button type="button" name="button" class="gradient-button-1">Gradient button 1</button>
          <button type="button" name="button" class="gradient-button-2">Gradient button 2</button>

        </section>

Answer 1

在某些屏幕尺寸中，背景不是从最左边开始的；这就是为什么它会留下一个小间隙（白线）。

您可以将background-origin: border-box; 添加到.gradient-button-2:hover。可以在MDN 找到一个很好的解释和一个活生生的例子：

background-origin CSS 属性设置背景定位区域。换句话说，它使用background-image 属性设置图像集的原点位置。

.gradient-button-1 {
    color: orangered;
    background: none;
    padding: 1.5rem 3rem;
    font-size: 1.3rem;
    border: solid 10px transparent;
    border-image: linear-gradient(to top right, orangered,yellow);
    
    border-image-slice: 1;
    outline: none;
    transition: all ease 0.3s;
}

.gradient-button-1:hover {
    background-image: linear-gradient(to top right, orangered,yellow);
    color: white;
}

.gradient-button-2 {
    color: orangered;
    background: none;
    padding: 1.5rem 3rem;
    font-size: 1.3rem;
    border: solid 10px transparent;
    border-image: linear-gradient(to right, orangered,transparent);
    border-image-slice: 1;
    outline: none;
    transition: all ease 0.3s;
}
.gradient-button-2:hover {
    background-image: linear-gradient(to right, orangered,transparent);
    border-right: none;
    border-right-style: none;
    color: white;
    background-origin: border-box; /* This line is new! */
}

<section>

          <h4>Gradient Bordered Buttons</h4>
          <button type="button" name="button" class="gradient-button-1">Gradient button 1</button>
          <button type="button" name="button" class="gradient-button-2">Gradient button 2</button>

        </section>

Answer 2

.gradient-button-1 {
    color: orangered;
    background: none;
    padding: 1.5rem 3rem;
    font-size: 1.3rem;
    border: solid 10px transparent;
    border-image: linear-gradient(to top right, orangered,yellow);
    
    border-image-slice: 1;
    outline: none;
    transition: all ease 0.3s;
}

.gradient-button-1:hover {
    background-image: linear-gradient(to top right, orangered,yellow);
    color: white;
     background-position: -1px;
    background-size: 101%;
}

.gradient-button-2 {
    color: orangered;
    background: none;
    padding: 1.5rem 3rem;
    font-size: 1.3rem;
    border: solid 10px transparent;
    border-image: linear-gradient(to right, orangered,transparent);
    border-image-slice: 1;
    outline: none;
    transition: all ease 0.3s;
    
     
     
}
.gradient-button-2:hover {
    background-image: linear-gradient(to right, orangered,transparent);
    border-right: none;
    border-right-style: none;
    color: white;
    
  
    
}

<section>

          <h4>Gradient Bordered Buttons</h4>
          <button type="button" name="button" class="gradient-button-1">Gradient button 1</button>
          <button type="button" name="button" class="gradient-button-2">Gradient button 2</button>

        </section>