使用背景图片代替边框

编程问答 2022-08-15

问题描述

我有一个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(...);
}

它看起来和第一个一样

解决方法

您在寻找那个吗？

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

border