如何在邊框樣式中添加襯墊漸變？

Question

在這里，我有一個圓形徽章。 下面是它的代碼

 .center-badge { background: #09a49c; height: 120px; width: 120px; border-radius: 50%; text-align: center; display: flex; justify-content: center; align-items: center; border: 10px solid #f2f2f2; position: absolute; top: -50px; left: -30px; line-height: 16px; }.center-badge p { font-size: 12px; color: var(--white); margin-bottom: 0px; }.center-badge p strong { display: block; font-size: 16px; }

 <div class="center-badge"> <div> <p>Taux </p> <p>codemandeur</p> </div> </div>

現在我被要求將邊框顏色添加為linear-gradient(#fbfbfb, #c5d4dd) 。 但這僅適用於背景圖像。 我添加了類似的東西，但它覆蓋了我的全身顏色。 請幫我解決這個問題

.center-badge {
    background: #09a49c;
    height: 120px;
    width: 120px;
    border-radius:50%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -50px;
    left: -30px;
    line-height: 16px;
    border: 10px solid transparent;
    background-image: linear-gradient(#fbfbfb, #c5d4dd);
    background-origin: border-box;
    background-repeat: no-repeat;  
}

我相信重復的背景是問題所在。 如何將此線性漸變應用為邊框

Answer 1

我在我的項目中使用了這個。 它會起作用的。

.center-badge {
  ...
  background-image: linear-gradient(#09a49c , #09a49c),
                    linear-gradient(to right, #fbfbfb, #c5d4dd);
  background-origin: border-box;
  border: double 0.2em transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  ...
}