使用border-image-source實現按鈕的圓角是線性漸變

Question

我想在使用border-image-source到線性漸變時實現按鈕的圓角。

片段如下-

按鈕類：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>