使用边框图像源实现按钮的圆角是线性渐变

Question

我想在使用边框图像源到线性渐变的同时实现按钮的圆角。

片段如下 -

按钮类 :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>