1

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

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

这就是我得到的。 不工作

这是我删除第一个按钮后的样子 工作图像

这是代码

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

4

2 回答 2

2

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

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

background-originCSS 属性设置背景定位区域。换句话说，它使用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>

于 2018-10-27T06:52:44.453 回答
0 

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

于 2018-10-27T06:32:17.730 回答