使用背景图像而不是边框

Question

我有一个 div 悬停时需要 5px 底部边框，左右边框。

即使我使用 box-sizing: border-box，至于不改变大小，我也遇到了麻烦，因为悬停时 div 内的文本会移动。

我好像边框影响了内边距什么的。

我可以在 css 中用线性渐变的背景图像重新创建这种效果吗？

谢谢

编辑：

我有一个div

#my-div {      
  background-color: green;
}

#my-div:hover {
  border-right: 5px solid red;
  border-bottom: 5px solid red;
  border-left: 5px solid red;        
}

我不想拥有所有这些，而是想做一个看起来和那个一样的线性渐变，所以它会是

#my-div:hover {
  // something that would look like if I had done
  // border-right: 5px solid red;
  // border-bottom: 5px solid red;
  // border-left: 5px solid red;
  // background-color: green;    
  background-image: linear-gradient(...);
}

它看起来和第一个一样

Answer 1

你在找那个吗？

#my-div {
  border: 5px solid transparent;
  border-image-slice: 1;
  border-top: none;
  margin: 1em;
  padding: .3em .7em;
  display: inline-block;
  background-color: rgba(50, 161, 205, 0.5);
  }
#my-div:hover {
  border-image-source:  linear-gradient(to right, red, orange);
  }

<div id="my-div"> text not moving on hover </div>

使用背景图像而不是边框

Use background image instead of border

css

border