如何在CSS中定义border-image属性的半径？

Question

我想创建一个看起来像我上传的图像的按钮。我希望按钮有位于按钮背景顶部的边框。并且按钮的边框也是渐变的，并且边框从按钮的左侧到右侧消失。

我尝试使用 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;
}

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

如何定义边框图像的半径，以便边框也显示在圆形按钮中？

Answer 1

我移动边框半径：25px；在.primary类中添加overflow:hidden;在边界半径中：继承；在.primary::之前

.primary {
  position: relative;
  background: linear-gradient(0deg, rgba(22, 156, 95, 0.6), rgba(22, 156, 95, 0.6));
  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;
  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: inherit;
}

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