使用border-image-source实现按钮的圆角是线性渐变

Question

我想在使用border-image-source到线性渐变时实现按钮的圆角。

片段在下面 -

button-class：card-approve-btn

CSS： -

.card-approve-btn {
    width: 85px;
   height: 30px;
  text-align: center;
  color: #485564;
    font-size: 14px;
  line-height :10px;
  font-weight: 600;

  border-radius: 6px;
  background-color: #ffffff;
  border-style: solid;
  border-width: 1px;
  border-image-source: linear-gradient(291deg, #ffb37c, #f9514f);
  border-image-slice: 1;

}

使用上面的css导致前卫的角落。并且，在谷歌搜索之后，我知道不可能同时具有边界半径和线性渐变。它真的不可能吗？如果否，那么请建议是否有人有答案。

Answer 1

您可以将渐变应用为主背景，然后使用其上方的伪元素隐藏它并仅保留边框部分可见：

.card-approve-btn {
  position: relative;
  display:inline-block;
  background-image: linear-gradient(291deg, #ffb37c, #f9514f);
  padding:0 20px;
  line-height:30px;
  text-align: center;
  color: #485564;
  border-radius: 6px;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  z-index:0;
}

.card-approve-btn:before {
  content: '';
  position: absolute;
  /* specify the value of border width here */
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  /* --- */
  background-color: #fff;
  border-radius: 5px;
  box-sizing: border-box;
  z-index: -1;
}

<div class="card-approve-btn">
  Approve
</div>