border-image-sourceのボタンの角を丸くするのは直線勾配です

Question

border-image-sourceからlinear gradientを使用しているときにボタンの角を丸くしたいと思います。

スニペットは以下の通りである -

ボタンクラス：カード承認-BTN

CSS - 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; 

} 

は、エッジの効いたコーナーで得られています。グーグルでは、ボーダー半径と直線勾配の両方を持つことができないことを知りました。それは本当に不可能ですか？ いいえ、回答がある場合は、お勧めします。

Answer 1

同じ動作をシミュレートするための回避策は、このような背景として擬似要素と線形勾配を使用することです：

UPDATE：

私はコンテンツのためspanを追加しました（あなたはまた、使用することができますdiv）、z-indexを適用して（疑似要素の上に）表示させます。私はまた、整列のためのいくつかのflexプロパティを追加しました。

.card-approve-btn { 
 
    position: relative; 
 
    background-image: linear-gradient(291deg, #ffb37c, #f9514f); 
 
    width: 85px; 
 
    height: 30px; 
 
    text-align: center; 
 
    color: #485564; 
 
    border-radius: 6px; 
 
    overflow: hidden; 
 
    font-size: 14px; 
 
    display: flex; 
 
    align-items: center; 
 
    font-weight: 600; 
 
} 
 

 
.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: 0; 
 
} 
 

 
.card-approve-btn span { 
 
    position: relative; 
 
    z-index: 1; 
 
    flex: 1; 
 
}

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