如何为CSS的border-image属性设置圆角以实现渐变圆角按钮？

我想要制作一个符合以下要求的按钮：

• 边框覆盖在按钮背景之上，呈现从左到右逐渐消失的渐变效果
• 按钮带有圆角样式

尝试使用border-image属性实现时，边框显示为矩形，无法匹配按钮的圆角。现有代码如下：

现有CSS代码 #

.primary {
  background: linear-gradient(0deg, rgba(22, 156, 95, 0.6), rgba(22, 156, 95, 0.6)),
              linear-gradient(127.48deg, rgba(255, 255, 255, 0.25) 1.57%, rgba(255, 255, 255, 0) 98.43%),
              linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
  text-align: center;
  color: #fff;
  padding: 0 4rem !important;
  font-size: 16px !important;
  border: none;
}

.primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-image: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
  border-image-slice: 1;
  background-clip: content-box;
  border-radius: 25px;
}

现有HTML代码 #

<button class="primary">Button</button>

请问如何实现带圆角的渐变边框？

border-image属性本身不支持与border-radius同时生效，因此需要换一种思路实现。我们可以通过伪元素+CSS渐变+Mask遮罩的方式，实现带圆角的渐变边框，具体修改后的代码如下：

修改后的CSS代码 #

.primary {
  position: relative; /* 为伪元素提供定位参照 */
  background: linear-gradient(0deg, rgba(22, 156, 95, 0.6), rgba(22, 156, 95, 0.6)),
              linear-gradient(127.48deg, rgba(255, 255, 255, 0.25) 1.57%, rgba(255, 255, 255, 0) 98.43%),
              linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
  text-align: center;
  color: #fff;
  padding: 0 4rem !important;
  font-size: 16px !important;
  border: none;
  border-radius: 25px; /* 设置按钮圆角 */
  overflow: hidden; /* 确保内容不超出圆角范围 */
}

.primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit; /* 继承按钮的圆角样式 */
  padding: 3px; /* 控制边框宽度 */
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
  /* 通过Mask遮罩只保留padding区域的渐变，模拟边框 */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none; /* 避免伪元素干扰按钮交互 */
}

核心原理说明 #

1. 给按钮添加position: relative和border-radius，并设置overflow: hidden保证整体圆角一致性
2. 伪元素通过padding模拟边框宽度，用background设置渐变效果
3. 利用CSS Mask属性，将伪元素的内容区域（按钮背景部分）隐藏，只保留padding区域的渐变，从而实现边框效果
4. border-radius: inherit确保伪元素圆角与按钮一致，pointer-events: none避免遮挡按钮的点击事件

内容的提问来源于stack exchange，提问作者Zain Mukhtar