带圆角的CSS渐变边框：背景与边框间意外间隙如何解决？

你遇到的圆角间隙是因为padding-box背景裁剪在圆角处的精度限制，没法完全覆盖border-box的渐变背景，导致未悬停时渐变从角落透出。下面提供两种能保留淡入淡出动画的解决方法：

方法一：用clip-path精准裁剪背景 #

通过clip-path替代padding-box的背景裁剪规则，让纯色背景完全覆盖到圆角边缘，彻底挡住渐变缝隙：

.button {
  /* 基础样式 */
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 10px 20px;
  background: 
    linear-gradient(rgb(25, 25, 25), rgb(25, 25, 25)), 
    linear-gradient(160deg, #2787FF, #54D1A4) border-box;
  /* 用clip-path替代padding-box，圆角值和border-radius一致 */
  clip-path: inset(0 round 8px);
  /* 初始隐藏渐变边框：通过背景位置偏移 */
  background-position: 100% 100%, 0 0;
  background-size: 100% 100%, 0 0;
  transition: background-size 0.3s ease;
}

.button:hover {
  /* 悬停时显示渐变边框 */
  background-size: 100% 100%, 100% 100%;
}

方法二：用伪元素模拟渐变边框 #

这种方法彻底避开背景盒模型的冲突，通过伪元素单独实现渐变边框，控制起来更灵活：

.button {
  /* 基础样式 */
  position: relative;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  background-color: rgb(25, 25, 25);
  z-index: 1;
}

.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px;
  padding: 2px; /* 边框宽度 */
  background: linear-gradient(160deg, #2787FF, #54D1A4);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.button:hover::before {
  opacity: 1;
}

两种方法都能保留渐变边框的淡入淡出动画，同时彻底消除圆角处的间隙问题。

内容的提问来源于stack exchange，提问作者mr. sudo