如何为叠加在渐变/视频背景上的按钮实现支持圆角的渐变边框（border-image）

我太懂这种踩坑的感觉了！想用渐变边框+圆角，还得让按钮背景完全透明，能透出下面的视频或者渐变背景，结果试了border-image发现圆角不生效，用双层背景遮罩又把后面的背景挡住了，对吧？

首先得先明确一个关键点：border-image本身是不支持border-radius的，这是CSS规范里的设定，所以你直接给带border-image的按钮加圆角肯定没用，这也是为什么你之前尝试后角还是尖的。而你试的那种background-image: linear-gradient(white, white), linear-gradient(...)的方法，因为中间的白色是实色，自然会把后面的背景挡住，达不到透明的要求。

那怎么解决呢？给你两个亲测有效的方法，都能实现「圆角渐变边框+透明背景」的效果，完美适配你的需求：

方法一：用CSS Mask直接实现（代码最简洁） #

这个方法利用CSS的mask属性，通过遮罩组合来保留中间的透明区域，同时让渐变边框显示出来，还能完美支持圆角：

.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  height: 54px;
  font: normal normal 600 16px/21px "Inter", sans-serif;
  letter-spacing: 0;
  color: #ffffff;
  text-decoration: none;
  margin-block: 40px 0px;
  border-radius: 32px;
  /* 渐变边框的核心：用mask实现中间透明，边框显示渐变 */
  border: 2px solid transparent; /* 边框宽度要和你想要的一致 */
  background: linear-gradient(90deg, #9DFF71, #FFD88D, #FF76D5, #55BEFF);
  -webkit-mask: 
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: all 0.3s ease;
}

.cta-btn:hover {
  /* hover状态下，只需要给按钮加半透明背景，边框渐变保持不变 */
  background: linear-gradient(90deg, #9DFF71, #FFD88D, #FF76D5, #55BEFF),
              #17303949;
  -webkit-mask: 
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  color: #ffffff;
  text-decoration: none;
}

原理很简单：通过mask-composite: exclude（或者webkit内核的xor），让两个遮罩叠加后，中间的padding-box区域变成透明，只有边框区域显示我们设置的渐变背景，这样后面的视频/渐变就能透出来，同时border-radius也能正常生效。

方法二：用伪元素模拟渐变边框（兼容性更稳妥） #

如果你的项目需要兼容一些对mask支持不好的旧浏览器，也可以用伪元素来实现：

.cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  height: 54px;
  font: normal normal 600 16px/21px "Inter", sans-serif;
  letter-spacing: 0;
  color: #ffffff;
  text-decoration: none;
  margin-block: 40px 0px;
  border-radius: 32px;
  background: transparent;
  transition: all 0.3s ease;
  z-index: 1; /* 确保按钮内容在伪元素上面 */
}

.cta-btn::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(90deg, #9DFF71, #FFD88D, #FF76D5, #55BEFF);
  border-radius: inherit; /* 继承按钮的圆角 */
  z-index: -1; /* 把伪元素放在按钮下面 */
  /* 同样用mask裁掉中间的部分，只留边框 */
  -webkit-mask: 
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.cta-btn:hover {
  background: #17303949; /* hover时只需要给按钮加半透明背景 */
}

这个方法是把渐变边框放在伪元素里，通过mask把中间的区域裁掉，按钮本身保持透明，这样也能实现同样的效果，而且伪元素的兼容性比mask稍微好一点（不过现在主流浏览器都支持mask了）。

你可以随便选一种试试，这两种方法都能完美解决你的问题：渐变边框会跟着圆角走，同时按钮中间完全透明，下面的视频或渐变背景能透出来，hover状态也能正常生效~

内容来源于stack exchange